盒模型在页面布局中随处可见,因此非常有必要了解。盒模型由外而内分别指的是: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盒模型。