CSS的盒子模型分为两种
一种是W3C标准盒模型，又被称为 标准模式
另一种是IE盒模型，也被称为怪异模式
在开始介绍两种盒子模型以前，我们先来看一个小问题。
假设一个div属性如下。问，这个div的整体宽度是多少？
width:50px;
padding:10px;
border:5px solid #FFF
答案：
可能是50px + 10px * 2 + 5px * 2 = 80px
也可能是：50px
这完全取决于这个div当前处于哪种盒模型下。
W3C标准盒模型
W3C标注盒模型规定，一个元素的所占用的宽度 = width + border * 2 + padding * 2。
也就是border和padding不计入width的宽度之内，作为独立空间存在的。
参考上面的小问题，如果width为50px,padding为10px，border为5px,那么在W3C标准盒模型下，这个元素整体的占用宽度为 50px + 10px * 2 + 5px * 2 = 80px
如图
IE盒模型
IE盒模型的规则是，一个元素所占用的宽度 = 元素本身的width 或 border * 2 + padding * 2
对的，IE盒模型所占用的空间大小并不是一套固定的公式,他有两种可能。这完全取决于width本身的数值是否大于border * 2 + padding * 2；
如果width本身的数值大于border * 2 + padding * 2；那么在IE盒子模型下当前元素的占用空间就是width本身的数值。
反之则是 border * 2 + padding * 2
如图
or
如何切换W3C标准盒模型和IE盒模型
可以使用CSS中你的border-sizing属性来设定当前属性处于哪种盒模型下。
当border-sizing属性的属性值为border-box时，说明当前盒子处于IE（怪异）盒模型下
当border-sizing属性的属性值为content-box或没有border-sizing属性时,说明当前盒子处于标准盒模型下。
值得注意的是，如果没有设定过当前元素的盒模型，那么浏览器默认使用的是W3C标准盒模型。
欢迎技术沟通，摸鱼聊天～
备注来自掘金～
wx:XXF1096032096
