CSS 布局

预备知识

CSS 盒模型 | Shaw

写在前面

我们在 HTML 学到很多元素有默认的 display 属性，例如 <p>、 <ul>、 <li>、 <img> 等默认为 block，而<a>、 <em>、 <strong> 等默认为 inline，这些都是元素的外部显示类型

这一节我们将继续深入学习 display 属性，重点了解 flex 和 grid，它们可以改变元素的内部显示类型，是了解网页布局的重点。

到此为止我们讨论的都是正常布局流：

块级元素宽度为其父元素的100%，同时另起一行
内联元素会跟随内联元素，遇到宽度不足的情形则自动换行
大致的图景是块级元素从上到下依次排列，块级父元素的内联子元素先从左到右横向排列，宽度不足以放下时自动换行，接着还是从左到右横向排列

然后我们将学习浮动 float 和定位 position 属性。它们或者改变正常布局流，或者将元素从当前布局中抽离，放置到在另一个图层中

弹性盒子 Flexible Box

有这样一个 class 为wrapper的容器元素，它的内部有三个<div>元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示

1
2
3

.wrapper {
    display: flex;
}

<div class="wrapper">
  <div class="box a">One</div>
  <div class="box b">Two</div>
  <div class="box c">Three</div>
</div>

此时容器元素宽度为页面宽度，flex 子元素高度等于容器高度，宽度等于内容宽度，容器剩余部分空白填充

flex 子元素中添加声明 flex: 1，则三个子元素自动调整等宽并填满容器宽度

可以尝试更改某个的 box 的 flex 值，看看有什么变化

提示：在线查看上面例子的源代码和效果演示

网格 Grid

Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。同 flex 一样，你可以通过指定 display 的值来转到 grid 布局：display: grid

设置网格

除了使用display: grid，我们还分别使用 grid-template-rows 和 grid-template-columns 两个属性定义了一些行和列的轨道，像这样定义一个2*3的网格

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

默认情况下元素按从左到右、从上到下排列

放置元素

利用 grid-column 和 grid-row 两个属性来指定每一个子元素应该从哪一行 / 列开始，并在哪一行 / 列结束

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}

通过设置起止点，网格内的元素甚至可以交叠

提示：在线查看上面例子的源代码和效果演示

浮动 Float

float 元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动的元素周围环绕

<h1>Simple float example</h1>

<div class="box">Float</div>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

在下面这个例子当中，我们把一个<div>元素浮动到左侧，并且给了他一个右侧的 margin，把文字推开

.box {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}

提示：在线查看上面例子的源代码和效果演示，改变页面宽度观察有什么变化

定位 Positioning

定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置

有一些非常有用的技术在特定的布局下依赖于 position 属性。同时，理解定位 (positioning) 也能够帮助你理解正常布局流 (normal flow)，理解把一个元素移出正常布局流 (normal flow) 是怎么一回事

有五种主要的定位类型需要我们了解：

静态定位（Static positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”
相对定位（Relative positioning）允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计（design pinpointing）非常有用
绝对定位（Absolute positioning）将元素完全从页面的正常布局流（normal layout flow）中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <html> 元素边缘固定，或者相对于该元素的最近被定位祖先元素（nearest positioned ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板
固定定位（Fixed positioning）与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
粘性定位（Sticky positioning）是一种新的定位方式，它会让元素先保持和 position: static 一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像 position: fixed 一样定位