css3 盒子模型

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

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为。还有一些特殊的盒子，这些盒子在处理一些特殊的问题时会有很大的帮助，稍后会介绍这些特殊盒子。

块级盒子：会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽，每个块级盒子都会换行，且width 和 height 属性可以发挥作用，内边距、外边距和边框会将其他元素从当前盒子周围“推开”。常见块级元素：<div>、<form>、<footer>、<h1>-<h6>、<ol>、<ul>、<li>、<p>、<video>。

内联盒子：不会产生换行，width 和 height 属性不会起作用，并且只有水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。用做链接的 <a> 、 <span>、 <em> 以及 <strong> 标签都是默认处于 inline 状态的。

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

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。CSS 中一个块级盒子有四个部分，如下图所示。

对于块级盒子，如果你给盒设置 width 和 height，实际设置的是 content。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。margin 不计入实际大小，当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止。盒子还有一个outline，outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。和margin一样，outline也不计入盒子的实际大小。

对于内联盒子，例如由<span>元素创建的那些内联盒子，只有部分属性会生效。

在下面的示例中，我们在一个段落中使用了<span>，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。

<p>
    I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>    

span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
}

如果不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。可以使用display 一个特殊的值—inline-block，它在内联和块之间提供了一个中间状态。

内联-块级盒子：如果一个盒子使用 display: inline-block，那么这个盒子不会换行，但是设置width 和height 属性会生效，并且padding、margin以及border 会推开其他元素。

在下面的示例中，将 display: inline-block 添加到 元素中，查看显示模型中的差异。可以发现宽度和高度都生效了，并且也不会出现重叠现象。

<p>
    I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>  

span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
  display: inline-block;
}

当在父内容里面垂直居中一个块内容，或者使容器的所有子项占用等量的可用宽度/高度，又比如使多列布局中的所有列采用相同的高度，遇到这样的问题，我们可能无法从前面所学的盒模型来完成这样的任务。这个时候，就需要使用一种新的盒模型—弹性盒子，弹性盒子使得很多布局任务变得更加容易。

弹性盒子：设置display: flex。如果是内联元素，则设置display:inline-flex。沿着两个轴来布局，分别是主轴和交叉轴。主轴是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。交叉轴是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。

弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.box {
  display: flex;
}

还可以使用 column、row-reverse 和 column-reverse 值将那些元素设置为列布局或者反向排列 flex 项目。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.box {
  display: flex;
  flex-direction: row-reverse;
}

使用 justify-content 可以控制 flex 项在主轴上的位置。默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。也可以用 flex-end 来让 flex 项到结尾处。center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。而值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.box {
  display: flex;
  justify-content: center;
}

使用 align-items 可以控制 flex 项在交叉轴上的位置。默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。也可以设置诸如 flex-start、center 或 flex-end 这样使 flex 项在交叉轴的开始、中间或结束处对齐所有的值。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three
      <br>has
      <br>extra
      <br>text
  </div>
</div>

.box {
  display: flex;
  align-items: flex-end;
}

当在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的 弹性盒子子元素会溢出，破坏了布局。可以使用flex-wrap: wrap来解决溢出问题。存在着flex-direction 和 flex-wrap的缩写 flex-flow。比如，你可以将flex-direction: row，flex-wrap: wrap 替换成 flex-flow: row wrap。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.box {
    display: flex;
    flex-wrap: wrap;
}

弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。使用order属性来进行flex项排序，所有 flex 项默认的 order 值是 0，order 值大的 flex 项比 order 值小的在显示顺序中更靠后。相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是 2，1，1 和 0，那么它们的显示顺序就分别是第四，第二，第三，和第一。也可以给 order 设置负值使它们比值为 0 的元素排得更前面。

为了更好地控制 flex 元素，有三个属性可以作用于它们flex-grow、flex-shrink、flex-basis。在考虑这几个属性的作用之前，需要先了解一下 可用空间 available space 这个概念。这几个 flex 属性的作用其实就是改变了 flex 容器中的可用空间的行为。同时，可用空间对于 flex 元素的对齐行为也是很重要的。

假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下，flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。

如果期望这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些 flex 属性要做的事。

flex-basis 定义了该元素的空间大小（the size of that item in terms of the space），flex 容器里除了元素所占的空间以外的富余空间就是可用空间 available space。该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。在上面的例子中，所有元素都设定了宽度（width）为 100px，所以 flex-basis 的值为 100px。

如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给 Flex 元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。

flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

如果我们给上例中的所有元素设定 flex-grow 值为 1，容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。

flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有 1/4（各 50px）。

flex-grow属性是处理 flex 元素在主轴上增加空间的问题，相反flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。看到的 flex: 1 或者 flex: 2 等等。它相当于flex: 1 1 0。元素可以在flex-basis为 0 的基础上伸缩。

<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

.box {
  display: flex;
}
.one {
  flex: 2 1 auto;
}
.two {
  flex: 2 1 auto;
}
.three {
  flex: 1 1 auto;
}