CSS中的box-sizing属性有什么用

这篇文章主要为大家展示了“CSS中的box-sizing属性有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“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代码

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:30pxsolid#4169e1;

padding:10px;

box-sizing:content-box;

}

p.content2{

width:400px;

height:150px;

background-color:#f0f8ff;

border:30pxsolid#4169e1;

padding:10px;

box-sizing:border-box;

}

以上是“CSS中的box-sizing属性有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！