60、CSS盒子模型总结

目录

1、盒子的组成

2、盒子大小

3、兼容性

---

每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。

1、盒子的组成

一个盒子由外到内可以分成四个部分：

1. margin（外边距）：盒子的外边距。是完全透明的，开发者只可以设置它的边距
2. border（边框）：盒子的边界，它可以设置成可见的，样式多样的。
3. padding（内边距）：盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。
4. content（内容）

可以通过margin、border、padding这三个CSS属性来控制盒子。

2、盒子大小

盒子真正的宽和高按下面公式计算：

1. 盒子的宽度 = 内容宽度width + 左填充padding-left + 右填充 + 左边框 border-left + 右边框 + 左边距margin-left + 右边距
2. 盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

盒子的宽度和高度的计算方式由box-sizing属性控制，有3个属性值：

1. content-box：默认值，该盒子的width和height就是内容的宽高。在宽度和高度之外添加元素的内边距、边框、外边距。这种盒子模型成为标准盒子模型
2. border-box：为盒子设定的width和height属性包含了边框、内边距、内容的宽高，不包含外边框。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。这种盒子模型称为IE盒子模型。
3. inherit：规定应从父元素继承box-sizing属性的值。
    

box-sizing: border-box举例：

3、兼容性

IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。