什么是盒模型
在我们HTML页面中,每一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、填充区(padding)、边框区(border)、外边界区(margin)四部分组成。
盒模型有哪几种
- 标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
- 怪异模式下: 一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)(IE浏览器)
标准和怪异模型的转换
- box-sizing:content-box; 将采用标准模式的盒子模型标准
- box-sizing:border-box; 将采用怪异模式的盒子模型标准
- box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。