CSS 盒模型
简单来讲,就是用来装页面元素的一个矩形区域。
CSS 中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
标准盒子模型:
IE盒子模型:
从上面的两个图可以看出,这两种盒子模型不同点在于 width 的包含范围。
- 在标准盒子模型中: css中的宽(width) = content
- 在IE盒子模型中: css中的宽(width) = content + padding + border
所以,计算整个盒子的宽度时存在差异:
- 标准盒子模型的盒子宽度:2(border) + 2(padding) + width
- IE盒子模型的盒子宽度:width
在CSS3中引入了box-sizing
属性,它有两个值 content-box
,border-box
;
box-sizing:content-box
表示标准盒子模型;
box-sizing:border-box
表示IE盒子模型;