前端修炼小册

盒模型

# 盒模型

盒模型是 CSS 的核心概念，描述了元素如何显示，以及元素之间如何相互作用、相互影响。

# 边距和边框

在网页布局中，我们可以将 HTML 标签看成一个个矩形盒子，盒模型就是用来描述这些矩形盒子所占的空间大小。每个盒子都包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。如下图所示：

（盒模型）

  • 内边距：内容区周围的空间。给元素应用的背景会作用于元素内容和内边距。
  • 边框：在内边距外侧增加一条框线，这条框线可以是实线、虚线或点划线。
  • 外边距：边框的外侧，围在盒子可见部分之外的透明区域，用于控制元素之间的距离。

# 外边距折叠

这里要注意一种叫做外边距折叠的机制，即垂直方向上的两个外边距相遇时，会折叠一个外边距。折叠后外边距的高度等于两者中较大的那个高度。

# 块级元素和行内元素

# 块级元素

每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度、宽度以及对齐等属性。

块级元素的特点：

  • 块级元素会独占一行
  • 宽度默认是容器的 100%
  • 高度，行高，外边距和内边距都可以单独设置
  • 可以容纳内联元素和其他的块级元素
    • 文字块级标签例如 <p>，<h1> ~ <h6>，<dt> 等里面不能放其他的块级元素。
  • 多个块级元素沿垂直方向堆叠，在垂直方向上的间距由它们的上、下外边距决定

常见的块级元素：

<h1> ~ <h6> // 定义标题
<p>         // 标签定义段落
<div>       // 定义文档中的分区或节
<ul>        // 定义无序列表
<ol>        // 定义有序列表
<li>        // 标签定义列表项目
<hr>        // 创建一条水平线
1
2
3
4
5
6
7

更多常见的块级元素 (opens new window)

# 行内元素

行内元素（内联元素）不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度、高度以及对齐等属性。

行内元素的特点：

  • 和相邻的行内元素在一行上
  • 高度和宽度无效，但是水平方向上的 padding 和 margin 可以设置，垂直方向上的无效
  • 默认的宽度就是它本身的宽度
  • 行内元素只能容纳纯文本或者是其他的行内元素（a 标签除外）

由一行文本形成的水平盒子叫做行盒子，行盒子的高度由所包含的行内盒子决定。修改行盒子大小的唯一途径就是修改行高（line-height），或者给它内部的行内盒子设置水平方向的边框、内边距或外边距。

常见的行内元素：

<a>         // 标签可定义锚
<strong>    // 加粗
<b>         // 字体加粗
<em>        // 定义为强调的内容
<i>         // 斜体文本效果
<span>      // 组合文档中的行内元素
1
2
3
4
5
6

更多常见的行内元素 (opens new window)

# 行内块级元素

在行内元素中有几个特殊的标签，可以设置它们的宽高度以及对齐属性。

<img>       // 向网页中嵌入一幅图像
<input>     // 输入框
1
2

行内块级元素的特点：

  • 和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙
  • 默认的宽度就是本身内容的宽度
  • 高度，行高，内边距和外边距都可以设置

# 显示模式的转换

  • 块级元素转行内元素：display: inline
  • 行内元素转块级元素：display: block
  • 块级元素、行内元素转换为行内块级元素：display: inline-block

如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置 display 的值为 inline-block。

# 标准盒模型和 IE 盒模型

由于浏览器的差异性，盒模型分为标准盒模型和 IE 盒模型，它们的呈现方式和对盒子大小的计算略有不同。

# 标准盒模型

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

（box-sizing: content-box）

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

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

# IE 盒模型

IE 盒模型是老的 IE 浏览器在怪异模式 (opens new window)下使用自己的非标准模型。在标准盒模型下通过设置 box-sizing: border-box; 可转换为 IE 盒模型。

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

（box-sizing: border-box）

在 IE 盒模型中，盒子的大小等于元素的 width、height 值，因而 border 和 padding 的空间会挤压 content 的空间，使得元素的内容宽高小于 width、height 设置的值。

# 两种模型区别

差异：宽高计算方式不同

标准模型：计算元素的宽高只算 content 的宽高

IE 模型：计算元素的宽高包含 content、padding、border

# 浏览器兼容性及其它

  • 只要设置了合适的 DTD，大多数浏览器会按照标准盒模型来显示，但是 IE5.X 和 6 在怪异模式下会根据 IE 盒子模型进行显示。
  • 标准盒模型下元素的 box-sizing 属性（IE8+）默认值为 content-box，将它设置成 border-box 可转换为 IE 盒模型。在实际应用场景中，若想控制元素总宽高保持固定，这个设置很有用。
/* 根元素设置为 border-box */
:root {
  box-sizing: border-box;
}

/* 告诉其他所有元素和伪元素继承其盒模型 */
*,
::before,
::after {
  box-sizing: inherit;
}

/* 如有必要，恢复第三方组件的盒模型类型，防止破坏其布局 */
.third-party-component {
  box-sizing: content-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • 元素的宽（width）、高（height）、边框（border）、内边距（padding）、外边距（margin）都是盒子模型的重要组成部分，但是盒子模型的大小只与元素的宽高、边框、内间距有关，外边距只影响盒子所占外围空间的大小。

（完）

定位（position）