深入了解盒子模型（box model）

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。

本文围绕 “盒模型” 为主题展开。旨在于完成学习后，您能够在“理解盒装模型原理”的基础上，完成更加复杂的布局任务。

块级盒子（Block box） 和 内联盒子（Inline box）

在 CSS 中我们广泛地使用两种“盒子” —— 块级 盒子 (block box ) 和 内联盒子 (inline box )。 这两种盒子会在页面流 （page flow）和元素之间的关系 方面表现出不同的行为:

一个被定义成块级的（block）盒子会表现出以下行为:

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和height属性可以发挥作用
• 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。

如果一个盒子对外显示为 inline，那么他的行为如下:

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

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

我们通过对盒子display属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

补充: 内部和外部显示类型

在这里最好也解释下内部 和 外部 显示类型。如上所述， css的box模型有一个外部显示类型，来决定盒子是块级还是内联。

同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 标准流布局，也意味着它们和其他块元素以及内联元素一样(如上所述).

但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为flex元素，会根据弹性盒子（flexbox）规则进行布局，稍后您将了解这些规则。

注 : 想要了解更多有关显示值以及盒子在块和内联布局中的工作原理，请参阅 Block and Inline Layout.

当你进一步了解css布局的更多细节的时候，你会了解到 flex， 和其他内部显示类型会用到的值，例如 <a href="https://www.cyrilstudio.top">grid</a>。

块级和内联布局是web上默认的行为 —— 正如上面所述， 它有时候被称为 正常文档流 ， 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。

不同显示类型的例子

让我们继续看看别的例子。下面三个html元素，都有一个外部显示类型 block。第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。

第二个是一个列表，布局属性是 display: flex。 将在容器中建立一个flex布局，但是每个列表是一个块级元素 —— 像段落一样 —— 会充满整个容器的宽度并且换行。

下面有个块级段落，里面有两个 <span> 元素。正常情况下是 inline，但是其中一个加了block类，设置属性 display: block。

<section class="preview"><p>I am a paragraph. A short one.</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>
    </section>

Interactive editor

p,
ul {
  border: 2px solid rebeccapurple;
  padding: .5em;
}

.block,
li {
  border: 2px solid blue;
  padding: .5em;
}

ul {
  display: flex;
  list-style: none;
}

.block {
  display: block;
}
  

<p>I am a paragraph. A short one.</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>
  

我们可以看到 inline 元素在下面例子中的表现。 <span> 在第一段默认是内联元素所以不换行。

还有一个 <ul> 设置为 display: inline-flex，使得在一些flex元素外创建一个内联框。

最后设置两个段落为 display: inline。 inline flex 容器和段落在一行上而不是像块级元素一样换行。

你可以修改 display: inline 为 display: block 或者 display: inline-flex 改为 display: flex 来观察显示模式切换。

<section class="preview"><p>
    I am a paragraph. Some of the
    <span>words</span> have been wrapped in a
    <span>span element</span>.
</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p class="inline">I am a paragraph. A short one.</p>
<p class="inline">I am another paragraph. Also a short one.</p>
    </section>

Interactive editor

p,
ul {
  border: 2px solid rebeccapurple;
}

span,
li {
  border: 2px solid blue;
}

ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
}

.inline {
  display: inline;
}
  

<p>
    I am a paragraph. Some of the
    <span>words</span> have been wrapped in a
    <span>span element</span>.
</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p class="inline">I am a paragraph. A short one.</p>
<p class="inline">I am another paragraph. Also a short one.</p>
  

在后面的内容中会遇到诸如弹性盒子布局的内容；现在需要记住的是， display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。

剩下的内容，我们会专注于外部显示类型。

什么是CSS 盒模型?

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。

盒模型的各个部分

CSS中组成一个块级盒子需要:

• Content box : 这个区域是用来显示内容，大小可以通过设置width和height.
• Padding box : 包围在内容区域外部的空白区域； 大小通过padding 相关属性设置。
• Border box : 边框盒包裹内容和内边距。大小通过border相关属性设置。
• Margin box : 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过margin 相关属性设置。

如下图：

标准盒模型

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box 。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 见下图。

假设定义了 width, height, margin, border, and padding:

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。

注 : margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

替代（IE）盒模型

你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

.box {
  box-sizing: border-box;
} 

如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性，正如下面的例子。

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

注： 一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用 box-sizing 进行切换

admin普通

打赏 收藏 海报 链接