1.定义（W3C）
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
三个属性/box-sizing: content-box|border-box|inherit;
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
神马神马？--- 要是如此一目就了然了，我还精心准备例子？
2.举例
html：
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
2.1 box-sizing: content-box
css：
.box1{
width: 100px;
height: 100px;
border: solid 10px green;
background-color: skyblue;
float: left;
/* box-sizing: content-box;*/
margin: 10px;
}
.box2{
width: 100px;
height: 100px;
border: solid 10px green;
background-color: hotpink;
float: left;
box-sizing: content-box;
margin: 10px;
}
结果：
01.jpg
02.jpg
box1未设置box-sizing的值，box2设置box-sizing的值为content-box，从01和02图中可以看出，box1和box2的border的宽度值均显示在盒子外边为10px，"向外撑开"，且可以知道box-sizing: content-box;为默认下的状态。
2.2 box-sizing: border-box
css：
.box1{
width: 100px;
height: 100px;
border: solid 10px green;
background-color: skyblue;
float: left;
/* box-sizing: border-box;*/
margin: 10px;
}
.box2{
width: 100px;
height: 100px;
border: solid 10px green;
background-color: hotpink;
float: left;
box-sizing: border-box;
margin: 10px;
}
03.jpg
04box1.jpg
05box2.jpg
box1未设置box-sizing的值，box2设置box-sizing的值为 border-box;，从03、04和05图中可以看出，box1的border的宽度值前面说过自然显示在盒子外部为10px，"向外撑开"，而box2的border的宽度值显示在盒子内部为10px，"向内撑开"。
2.3 box-sizing: inherit
从父元素继承 box-sizing 属性的值(W3C)
这个就比较好理解了，子元素设置该属性之后，父元素设置了怎样的box-sizing属性，子元素将继承该属性。
2.3 总结
2.3.1
content-box：默认属性，"向外撑开"；
border-box："向内撑开"；
inherit：子继承父属性
2.3.2
除上文所设置border例子之外，对padding的影响也是一样的，可以试一试哦！
网友评论