块级盒子(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 盒模型？#

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

  盒模型的各个部分#

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

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

1
.box {
2
  width: 350px;
3
  height: 150px;
4
  margin: 25px;
5
  padding: 25px;
6
  border: 5px solid black;
7
}

1
.box {
2
  box-sizing: border-box;
3
}