我们都知道盒子模型有标准盒子模型和IE盒子模型。那么IE盒子模型适用到了IE几?现在的IE还是IE盒子模型吗?
盒子模型规定了一个元素在页面中占据空间大小的计算方式。当对一个元素设置 width
或 height
属性时:
标准盒子模型指的是
content-box
,它的边界是内容区,只对内容区域有效。容器占据的空间大小为:宽度 = width + paddingLeft + paddingRight + borderLeft + borderRight
高度 = height + paddingTop + paddingBottom + borderTop + borderBottom
IE盒子模型指的是
border-box
,它的边界是边框,对这个容器有效。容器占据的空间大小为:宽度 = width
高度 = height
另外:
- 通常说的“IE盒子模型”指的是IE5.5,IE6及其以后,盒模型都为
content-box
- 当浏览器未设置
<!doctype>
声明时,盒模型都为border-box
- 通过 css3 的
box-sizing
属性,可以更改元素的盒子模型