关于box-sizing

关于box-sizing

• box-sizing目前在盒模型用的也比较多了，是css3样式之一，刚接触的人，可能会懵逼，因为习惯了盒模型的标准模式，看官方文档的时候，真的无力吐槽了，看了别人的解释，瞬间明了，大家可以参考一下

• 转载地址：https://www.cnblogs.com/paul-myweb/p/5250382.html *

首先，盒子模型本身有两种模式：标准模式和怪异模式。关于标准模式和怪异模式的解释，在这里不多述说了。下面我们用div定义的“盒子”来理解这两种模式之间的差异。

.box{
    width:100px;
    height:100px;
    border:10px #ddd solid;
    padding:10px;
    margin:10px;
}  

在chrome浏览器下解析是这样的：

此时，box的width/height 实际上不包含padding和border,即box内容区的宽/高 = 100px;此时，是标准模式的盒模型

怪异模式:

在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的

盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

也即是说 width = 内容区宽度 + padding + border

如果加上box-sizing:border-box

.box{
    width:100px;
    height:100px;
    border:10px #ddd solid;
    padding:10px;
    margin:10px;
        box-sizing:border-box;
} 

此时，box的width/height 实际上包含了padding和border,即box内容区的宽/高 = 60px; 此时，是怪异模式的盒模型。

box-sizing的主要属性有两种：border-box和content-box，默认情况下，浏览器是按content-box即标准模式解析盒模型的，上面第一种情况即是。如果定义了box-sizing:border-box；浏览器就会以怪异模式解析盒子模型了

box-sizing是css3的属性，对于我们css盒子模型的兼容问题提供了很好的帮助，更可喜的是，连我们的IE8也支持了这一属性。

CSS3的box-sizing属性语法：

box-sizing : content-box || border-box || inherit;

• 在css3中新增了box-sizing属性，具备了以上知识后，我们已经理解：

• 当为content-box时，将采取标准模式进行解析计算
• 当为border-box时，将采取怪异模式解析计算
• 当为inherit时，将从父元素来继承box-sizing属性的值