盒模型

盒模型分类

• 标准盒模型
• IE盒模型

标准盒模型

• 元素的 width、height 只包含内容 content，不包含 border 和 padding 值
• 盒子的大小由元素的宽高、边框和内边距决定

我们用盒子的宽高来度量盒子的大小，可以看做是总的元素宽度和高度，与元素本身设置的宽高（width、height）不是同一个概念。

 盒子的宽 = width + border-width * 2 + padding-left + padding-right
 盒子的高 = height + border-width * 2 + padding-top + padding-bottom

IE盒模型

• 元素的 width、height 不仅包括 content，还包括 border 和 padding
• 盒子的大小取决于 width、height，修改 border 和 padding 值不能改变盒子的大小

浏览器兼容性及其它

• 只要设置了合适的 DTD（定义 XML 文档的合法构建模块），大多数浏览器会按照标准盒模型来显示，但是 IE5.X 和 6 在怪异模式下会根据 IE 盒子模型进行显示
• 标准盒模型下元素的 box-sizing 属性（IE8+）默认值为 content-box，将它设置成 border-box 可转换为 IE 盒模型。在实际应用场景中，若想控制元素总宽高保持固定，这个设置很有用
• 元素的宽（width）、高（height）、边框（border）、内边距（padding）、外边距（margin）都是盒子模型的重要组成部分，但是盒子模型的大小只与元素的宽高、边框、内间距有关，外边距只影响盒子所占外围空间的大小
  转载地址