CSS内容布局

网页是由不同内容块构成的：标题、段落、链接、列表、图片、视频，等等。

1.定位

定位并不适合总体布局，因为它会把元素拉出页面的正常流。

元素的初始定位方式为静态定位（static），即块级元素垂直堆叠。
把元素设置为相对定位（relative），然后可以相对于其原始位置控制该元素的偏移量，同时又不影响其周围的元素。
绝对定位（absolute）支持精确定位元素，相对于其最近的定位上下文。
固定定位（fixed）的定位上下文为浏览器视口。

1.1 绝对定位

1.1.1 绝对定位的应用场景

绝对定位非常适合创建弹出层、提示和对话框这类覆盖于其他内容之上的组件。

如果没有显式声明元素大小，那么绝对定位元素的大小由自身包含内容的多少来决定。如果相对于定位上下文的各个边声明偏移量，那么元素会被拉伸以满足设定的规则。

<header class="photo-header">

    <img src="images/big_spaceship.jpg" alt="An artist’s mockup of the ”Dragon” spaceship">

    <div class="photo-header-plate">

        <h1>SpaceX unveil the Crew Dragon</h1>

        <p>Photo from SpaceX on <a href="https://www.flickr.com/photos/spacexphotos/16787988882/">Flickr</a></p>

    </div>

</header>

.photo-header {

    position: relative;

}

.photo-header-plate {

    position: absolute;

    right: 4em;

    bottom: 4em;

    left: 4em;

    /* 省略 */

}

1.1.2 定位与z-index

z-index是堆叠元素的次序。

静态定位（static）以外的元素会根据它们在代码树中的深度依次叠放。就像打扑克发牌一样，后发的牌会压在先发的牌上面。它们的次序可以通过z-index来调整。

设置了z-index的元素，只要值是正值，就会出现在没有设置z-index的元素上方。尚未设置z-index的元素在z-index值为负的元素上方。

堆叠上下文：所有z-index不是auto的定位元素都会在这个上下文中排序。

堆叠上下文是由特定属性和值创建的。

在一个堆叠上下文内部，无论z-index值多大或多小，都不会影响其他堆叠上下文。

设置小于1的opacity值也可以触发新的堆叠上下文。

2.水平布局

通常，页面会随内容增加沿垂直方向扩展。后来添加的任何块容器（div、article、h1~h6，等等）都会垂直堆放起来，因为块级元素的宽度是自动计算的。

2.1 使用浮动

很多CSS布局会用到的一种基本技术：让浮动的元素构成一行中的列。

figure {

  float: right;

  max-width: 50%;

}

因为浏览器对浮动的支持极为普遍，所以浮动也成为了各种水平布局中的常用技术。

2.2 行内块布局

<p class="author-meta">

  <!-- image from Jeremy Keith on Flickr: https://flic.kr/p/dwFRgH -->

  <img class="author-image" src="images/author.jpg" alt="Arthur C. Lark">

  <span class="author-info">

	<span class="author-name">Written by Arthur C. Lark</span>

	<a class="author-email" href="mailto:arthur.c.lark@example.com">arthur.c.lark@example.com</a>

  </span>

</p>

.author-image,

.author-info {

  display: inline-block;

  /* 将这个行内块的垂直中心点与这行文本x高度的中心点对齐。 */

  vertical-align: middle;

}

.author-name,

.author-email {

  display: block;

}

对于每个块都占据确切宽度的水平布局而言，空白是一个突出的问题。

.navbar ul {

  /* 省略 */

  list-style: none;

  padding: 0;

  font-size:0;

}

.navbar li {

  text-transform: uppercase;

  display: inline-block;

  text-align: center;

  width: 25%;

  /* 使用box-sizing: border-box 确保每一项的边框及内边距都包含在各自25%的宽度以内。 */

  box-sizing: border-box;

  font-size:1rem;

}

.navbar li a {

  display: block;

  text-decoration: none;

  line-height: 1.75em;

  padding: 1em;

}

HTML源代码中的换行符被渲染成了空白符。

把包含元素的font-size设置为0，从而让每个空格的宽度为0。

使用表格显示属性实现布局：

.navbar ul {

  display: table;

  table-layout: fixed;

  width: 100%;

  height: 100px; /* 结合vertical-align: middle使用以实现垂直对齐 */

}

.navbar li {

  display: table-cell;

  width: 25%;

  vertical-align: middle; /* 垂直对齐 */

}

表格行中每一列的宽度有两种算法。

默认情况下，浏览器会使用"自动"算法。根据自身单元格内容所需的宽度来决定整个表格的宽度。
"固定"表格布局（table-layout:fixed）。列宽由表格第一行的列决定。

3.Flexbox

Flexbox是CSS提供的用于布局的一套新属性。这套属性包含针对容器（弹性容器，flex container）和针对对其直接子元素（弹性项，flex item）的两类属性。

Flexbox已经得到主流浏览器新版本的广泛支持。

3.1 理解Flex方向：主轴与辅轴

Flexbox可以针对页面中某一区域，控制其中元素的顺序、大小、分布及对齐。这个区域的盒子默认沿水平方向排列（这个排列方向称为主轴）。

与主轴垂直的方向称为辅轴。

Flexbox布局中最重要的尺寸是主轴方向的尺寸（主尺寸）：水平布局时的宽度或垂直布局时的高度。

.navbar ul {

    display: flex; /* 默认flex-direction: row */

}

导航条的链接项水平排列，而且根据各自的内容进行了收缩适应。

所有链接项集中在左侧，是从左到右书写的语言环境下的默认行为。我们可以使用flex-direction设置为row-reverse，那么所有链接项就会集中到右侧。

如果不指定大小，Flex容器内的项目会自动收缩。也就是说，一行中的各项会收缩到各自的最小宽度。

对Flex的子项指定值为auto外边距：

.navbar li:first-child {

    margin-right: auto;

}

3.2 对齐与空间

Flexbox对子项的排列有多种方式。沿主轴的排列叫排布（justification），沿辅轴的排列则叫对齐（alignment）。

用于指定排布方式的属性是justify-content，其默认值是flex-start，表示按照当前文本方向排布（向左对齐）。

Flexbox不允许指定个别项的排布方式。

.navbar ul {

    justify-content: flex-end; /* 向右对齐 */

}

默认情况下，Flex子项会沿辅轴方向填满Flex容器。

控制辅轴对齐的属性align-items，其默认值是stretch（拉伸）。也就是说，子项默认拉伸，以填满可用空间。

.navbar ul {

    align-items: flex-start;

    min-height: 100px;

}

我们还可以使用align-items: baseline将子项中文本的基线与容器基线对齐。

除了同时对齐所有项，还可以在辅轴上指定个别项的对齐方式。

.navbar ul {

    align-items: flex-end;

    min-height: 100px;

}

.navbar li:first-child {

    align-self: flex-start; /* 指定个别项的对齐方式 */

    margin-right: auto;

}

Flex中的垂直对齐：

<div class="flex-container">

    <div class="flex-item">

        <h2>Not so lost in space</h2>

        <p>This item sits right in the middle of its container, regardless of the dimensions of either.</p>

    </div>

</div>

.flex-container {

    height: 100%;

    display: flex; /* 将容器设置为flex。 */

    background-color: #12459e;

}

.flex-item {

    max-width: 25em;

    padding: 2em;

    margin: auto; /* 容器中的各项的自动外边距会扩展相应方向的空间。 */

    background-color: #fff;

}

Flex容器中有多个元素的垂直对齐：

<p class="author-meta">

    <img class="author-image" src="images/author.jpg" alt="Arthur C. Lark">

    <span class="author-info">

        <span class="author-name">Written by Arthur C. Lark</span>

        <a class="author-email" href="mailto:arthur.c.lark@example.com">arthur.c.lark@example.com</a>

    </span>

</p>

.author-meta {

    display: flex;

    align-items: center; /* 垂直对齐 */

    justify-content: center; /* 水平排布 */

}

.author-name,

.author-email {

    display: block;

}

3.3 可伸缩的尺寸

Flexbox支持对元素大小的灵活控制。这一点既是实现精确内容布局的关键，也是迄今为止Flexbox中最复杂的环节。

Flex的意思是“可伸缩”，体现在3个属性中：

flex-basis（控制主轴方向上的“首选”大小，默认值为auto。）
flex-grow（弹性系数，默认为0。）
flex-shrink（弹性系数，默认为1。）

使用flex简写属性一次性设置flex-grow、flex-shrink和flex-basis属性，值以空格分隔：

.navbar li {

    flex: 1 0 0%; /* flex: flex-grow  flex-shrink  flex-basis */

}

flex-grow: 1 中的1表示占整体的“几份”。

简写法中的flex-basis必须带单位，因此这里要么加百分号，要么就写成0px。

把flex-basis的值设置为0，那在这一步就不会给项目分配空间了。这种情况下，容器内部的全部空间都会留到第二步再分配（这里第二步使用flex-grow: 1 来确定具体项目的尺寸）。

当项目宽度总和超过容器宽度时，Flexbox会按照flex-shrink属性来决定如何收缩它们：

每个项目先用自己的flex-shrink乘以自己的flex-basis，然后再用乘积除以每一项的flex-shrink与flex-basis的乘积之和，最后再拿得到的比例系数去乘以超出的宽度，从而得到该项目要收缩的空间数量。

推荐阅读：flex - CSS(层叠样式表) | MDN

3.4 Flexbox布局

Flexbox支持让内容排布到多行或多列。

<ul class="tags">

    <li><a href="/Binary_planet">Binary planet</a></li>

    <li><a href="/Carbon_planet">Carbon planet</a></li>

    <--! 还有更多··· -->

</ul>

.tags {

    display: flex;

    flex-wrap: wrap; /* 允许折行 */

    margin: 0;

    padding: 1em;

    list-style: none;

}

.tags li {

    display: inline-block; /* 行内块 */

    margin: .5em;

}

相关阅读：行内元素和块元素以及行内块元素的特点

折行与方向：

.tags {

    /* 省略 */

    flex-direction: row-reverse; /* 从右向左排布 */

}

.tags {

    /* 省略 */

    flex-direction: row-reverse; /* 从右向左排布 */

    flex-wrap: wrap-reverse; /* 向上折行 */

}

多行布局中可伸缩的大小：

.tags li {

    flex: 1 0 auto;

}

稍微缩小一点浏览器窗口，就会导致最后一个标签折行。

使用max-width限制可伸缩的范围。

.tags li {

    flex: 1 0 auto;

    max-width: 14em;

}

在多行布局中，我们可以相对于容器来对齐行或列。

.tags {

    display: flex;

    flex-wrap: wrap;

    align-content: stretch; /* 默认值 */

    min-height: 300px;

}

align-content: stretch 表示每一行都会拉伸以填充自己应占的容器高度。

3.5 列布局与个别排序

Flexbox的order属性：默认情况下，每个项目的order值都为0，意味着按照它们在源代码中的顺序出现。

<div class="article-teaser">

    <h2>The Dragon and other spaceships</h2>

    <div class="article-teaser-text">

        <p>There are actual spaceships, flying in space right now, probably. For example, there’s the International

        Space Station, which is a spaceship of sorts. Well, actually it’s a space station, which is even cooler!</p>

    </div>

    <img src="images/medium_spaceship.jpg" alt="The Dragon spaceship in orbit around Earth.">

    <p class="article-teaser-more">

        <a href="/spaceships">Read the whole Spaceship article</a>

    </p>

</div>

.article-teaser {

    display: flex;

    flex-direction: column;

}

.article-teaser img {

    order: -1; /* order的值比较小的元素先出现。 */

}

order的值不一定要连续，而且正、负值都可以。只要是可以比较大小的数值，相应的项就会调整次序。

3.6 嵌套的Flexbox布局

<div class="article-teaser-group">

	<div class="article-teaser">

		<h2>The Dragon and other spaceships</h2>

		<div class="article-teaser-text">

			<p>There are actual spaceships,

			flying in space right now, probably. For example, there’s the International Space Station, which is

			a spaceship of sorts. Well, actually it’s a space station, which is even cooler!</p>

		</div>

		<img src="images/medium_spaceship.jpg" alt="The Dragon spaceship in orbit around Earth.">

		<p class="article-teaser-more">

			<a href="/spaceships">Read the whole Spaceship article</a>

		</p>

	</div>

	<div class="article-teaser">

		<!-- 省略 -->

	</div>

</div>

.article-teaser-group {

  display: flex;

}

.article-teaser {

  display: flex;

  flex-direction: column;

  /* 省略 */

}

.article-teaser-more {

  margin-top: auto;

}

Flexbox的bug与提示：

图片、视频，以及其他带有固定宽高比的对象，在作为可伸缩项时可能会有问题。解决方案是给这些对象加个包装元素，让包装元素作为可伸缩项。
Flex的可伸缩项具有所谓的“隐性最小宽度”。

参考资料：

菜鸟教程
w3school
《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德

巴特西