css的两种盒模型

在网页上的每个HTML元素都被浏览器看成是一个个矩形的盒子，这个盒子由元素的实际内容，填充，边框和边界组成，一个盒子的大小等于它的内容Content，内边距Padding，边框Border，外边距Margin相加。

在css中有有两种盒子模型，一种是W3C的标准盒子模型，另一种是IE的怪异盒子模型，这两个盒子的相同点就是它们的大小计算方式都是一样的，都是内容Content，内边距Padding，边框Border，外边距Margin相加，不同点就是它们的宽度和高度的计算方式不一样，标准盒子模型的宽度等于它的Content内容，而怪异盒子模型的宽度等于它的Content内容，左右Padding内边距，左右Border边框相加。

如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。

我们也可以给元素设置box-sizing样式来决定使用哪种盒子模型，box-sizing的默认属性是content-box，默认使用标准盒子模型，属性设置为border-box的话就是使用怪异盒子模型。

 

参考：https://zhuanlan.zhihu.com/p/80358641