CSS中使用box-sizing属性的方法-创新互联

这篇文章主要介绍CSS中使用box-sizing属性的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及成都玻璃贴膜等，在成都网站建设、成都全网营销、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

box-sizing属性可用于设置更改区域大小，比如，如果你需要并排放置两个带边框的框，可通过将 box-sizing 设置为 border-box实现，下面我们就来看具体的内容。

box-sizing属性是用于更改区域大小计算的设置，使用padding和border属性设定边距和边界线的粗细时，在区域的width和height中加入padding和border的部分，因此，根据padding和border的值，整个区域的大小就会改变。

CSS中使用box-sizing属性的方法

这是因为区域的大小不包含padding，border的值。

根据box-sizing属性改变设定，可以在区域大小中设置padding和border。这使得可以确定盒子的大小而不受padding和border的影响。

我们接着来看box-sizing的使用方法

box-sizing属性写法如下

box-sizing：value ;

value的值你可以写入content-box和border-box。

content-box：宽度和高度分别应用到元素的内容框；在宽度和高度之外绘制元素的内边距和边框。

border-box：为元素设定的宽度和高度决定了元素的边框盒，也就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

此外，如果输入inherit，则继承父元素的值。

下面我们来看一个具体的例子

代码如下

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
  <p class="content1">content-box(初始值)
  的情况下、padding和border不包括在width和height之中</p>
<p class="content2">border-box的情况下、padding和border包括在width和height之中</p>
</body>
</html>

设置宽度和高度完全相同的两个盒子（宽度400px，高度150px），第一个盒子设置的初始值content-box，第二个盒子设置的值是border-box。

CSS代码

p.content1 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: content-box;
}
p.content2 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: border-box;
}

运行结果

在浏览器上将显示如下效果

CSS中使用box-sizing属性的方法

以上是CSS中使用box-sizing属性的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：CSS中使用box-sizing属性的方法-创新互联
本文网址：https://www.cdcxhl.com/article34/eehpe.html

成都网站建设公司_创新互联，为您提供品牌网站建设、企业建站、服务器托管、微信小程序、用户体验、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容