CSS 盒子模型

一、什么是盒模型

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。

CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…等）。盒模型由 content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

1. content：由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。
2. padding：即内边距，负责延伸内容区域的背景（即内边距是透明的，受background影响），填充元素中内容与边框的间距。
3. border：即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成。
4. margin：即外边距，用空白区域扩展边框区域，以分开相邻的元素。

在CSS中，盒模型可以分为：

• W3C 标准盒模型
• IE 怪异盒模型

可以通过设置box-sizing属性设置盒模型类别。默认情况下，盒子模型为标准盒模型。

二、标准盒模型（content-box）

1. width、height尺寸

• width = 内容的宽度

• height = 内容的高度

2. 盒子尺寸

• 盒子总宽度 = width + padding + border + margin
• 盒子总高度 = height + padding + border + margin

3. 布局宽度offsetWidth

• offsetWidth = width + padding + border

三、IE盒模型（border-box）

1. width、height尺寸

• width = border + padding + 内容的宽度

• height = border + padding + 内容的高度

2. 盒子尺寸

• 盒子总宽度 = width + margin
• 盒子总高度 = height + margin

3. 布局宽度offsetWidth

• offsetWidth = width

四、box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度，如下：

box-sizing: content-box|border-box|inherit;

// content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
// border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
// inherit 指定 box-sizing 属性的值，应该从父元素继承
复制代码

参考文献

• developer.mozilla.org/zh-CN/docs/…
• developer.mozilla.org/zh-CN/docs/…