html中的盒模型

盒模型在页面布局中随处可见，因此非常有必要了解。盒模型由外而内分别指的是：margin，border，padding，content。如下图：

盒模型目前有两种标准：W3C标准下的盒模型和IE盒模型：content-box和border-box。

W3C标准下的盒模型：

从上面的图片可以看出标准盒模型的盒子包括margin，border，padding，content组成，并且content的内容不包含其他部分仅仅是content部分。

IE盒模型

IE盒模型

从图中可以看出ie盒模型也是由margin，border，padding，content组成，但是IE盒模型的内容包含了border和padding。

浏览器在两种盒模型是怎么选择的呢？

如果在网页中加上DOCTYPE声明，浏览器就会按照w3c标准渲染盒模型，如果不加的话各种不同的浏览器就会根据自己的内核去选择，trident内核就是IE盒模型，其他内核基本上都是w3c盒模型。