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

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

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

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

这是因为区域的大小不包含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代码

  
content-box(初始值)
  的情况下、padding和border不包括在width和height之中
border-box的情况下、padding和border包括在width和height之中

设置宽度和高度完全相同的两个盒子（宽度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属性的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

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