跳到主要内容

在 CSS 中，所有的元素都被一个个的“盒子”包围着，是使用 CSS 实现准确布局、处理元素排列的关键。

一、 区块盒子和行内盒子​

盒子一般分为区块盒子和行内盒子。而从盒子从页面流中的行为方式和以及与页面上其他盒子的关系，盒子有内部显示和外部显示两种。

1. 外部显示类型​

一个拥有 block 外部显示类型的盒子有：

  • 盒子会产生换行
  • width 和 height 属性可以发挥作用
  • 内边距、外边距和边框将会把其他元素从盒子周围推开
  • 如果未显式指定 width，方框将沿行方向扩展，以填充其容器中可用空间

<h1>、<p>、<div> 等默认使用 block 作为外部显示类型。

一个拥有 inline 外部显示类型的盒子会表现出：

  • 盒子不产生换行
  • width 和 height 属性不起作用
  • 垂直方向的内边距、外边距及边框会被应用但不会把其他处于 inline 状态的盒子推开
  • 水平方向的内边距、外边距及边框会被应用且会将其他处于 inline 状态的盒子推开

<a>、<span>、<em>、<strong> 等默认使用 inline 作为外部显示类型。

2. 内部显示类型​

盒子也有内部显示类型，它决定了盒子内元素的布局方式。

区块和行内布局是网格上默认行为方式。默认情况下，没有其他指令（样式设定）的情况下，方框内的元素会以标准流的方式布局，并表现为区块或行内盒子。

而通过设置 display: flex、display: grid、display: table 等可以更改为内部显示类型。

二、 CSS 盒模型​

CSS 盒模型整体上适用于区块盒子，它定义了盒子的不同部分（外边距、边框、内边距、内容）如何协同工作，以创建一个在页面上可以看见的盒子。行内盒子使用的知识盒模型中定义的部分行为。

1. 盒子的各部分​

  • 内容盒子：显示内容的区域；使用 inline-size 和 block-size 或 width 和 height 等属性来定大小
  • 内边距盒子：填充位于内容周围的空白处；使用 padding 和相关属性定义其大小
  • 边框盒子：边框盒子包住内容和任何填充；使用 border 和相关属性定义其大小
  • 外边距盒子：外边距是最外层，其报错内容、内边距和边框，作为该盒子与其他元素之间的空白；使用 margin 和其他属性定义其大小

2. 标准盒模型​

标准盒模型的 width/height 仅包含内容（content），总尺寸 = content + padding + border + margin。

现代浏览器模式渲染 CSS 使用的都是标准盒模型，即 box-sizing: content-box 是默认值。

3. 代替盒模型（怪异盒模型，也称 IE 盒模型）​

代替盒模型的 width/height 包含 content + padding + border，总尺寸 = 设定的 width/height + margin。

信息

MDN 将其翻译为 “替代盒模型”（“the alternative box model”），而我在早期的书中见到称之为 “怪异盒模型”，而该模型由于早期仅在 IE （5 和 6 版本）上支持也称 “IE 盒模型”（"IE Box Model"）

注意

怪异盒模型 !== 浏览器的怪异模式

浏览器的怪异模式 是 浏览器大战 （1990 年代）时 IE、Netscape 各自实现不同的 HTML/CSS 行为。

很多网页需依赖 IE 的 ”错误“ 行为才能正常显示。这就导致了后面的标准出来后，需要在文档的顶部添加 <!DOCTYPE html> 来声明自己是遵循 W3C 标准的。

只有非常老的页面或错误配置才可能触发怪异模式。

要在所有元素中使用代替方框模型，MDN 建议这么做：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

即可通过设置元素的 box-sizing 样式属性值为 border-box 就可以将一个盒子从标准盒模型转化为 IE 盒模型。