- 有两种,
IE
盒子模型、W3C
盒子模型;- 盒模型: 内容(content)、填充(
padding
)、边界(margin
)、 边框(border
);- 区 别:
IE
的content
部分把border
和padding
计算了进去;
- 盒子模型构成:内容(
content
)、内填充(padding
)、 边框(border
)、外边距(margin
) IE8
及其以下版本浏览器,未声明DOCTYPE
,内容宽高会包含内填充和边框,称为怪异盒模型(IE
盒模型)- 标准(
W3C
)盒模型:元素宽度 =width + padding + border + margin
- 怪异(
IE
)盒模型:元素宽度 =width + margin
- 标准浏览器通过设置 css3 的
box-sizing: border-box
属性,触发“怪异模式”解析计算宽高
box-sizing 常用的属性有哪些?分别有什么作用
box-sizing: content-box;
默认的标准(W3C)盒模型元素效果box-sizing: border-box;
触发怪异(IE)盒模型元素的效果box-sizing: inherit;
继承父元素box-sizing
属性的值