经典布局

# 经典布局

网页布局（layout）是 CSS 的一个重点应用，在实际开发中，前端工程师在拿到设计稿后，都会先梳理页面的大致结构，构思完页面的布局后，再进行 coding。大多数网站都有着相似的布局，掌握这些布局套路便可以快速高效的完成开发工作。

# 相关属性

与布局相关的 CSS 属性主要有 3 个：display、position 和 float。

# display

display 是 CSS 布局中很重要的一个属性，它定义了元素生成的显示框类型，常见的几个属性值有：block、inline、inline-block、inherit、none、flex。

inherit 表示这个元素从父元素继承 display 属性值；none 表示这个元素不显示，也不占用空间位置；flex 是 flex 布局重要的属性设置，后面会单独写一个章节进行介绍，本文先介绍前三个属性值。

每个元素都有默认的 display 属性，比如 div 标签的默认 display 属性是 block，我们通常称这类元素为块级元素；span 标签的默认 display 属性是 inline，我们通常称这类元素为行内元素。

（块级元素）

（行内元素）

从上面的图可以看出，块级元素总是独占一行，从上到下显示，行内元素则是从左到右显示。这是因为块级元素前后有换行符，而行内元素前后没有换行符。除此之外，块级元素和行内元素还有其他一些区别和特性：

块级元素：

没有设置宽度时，它的宽度是其容器的 100%；
可以给块级元素设置宽高、内边距、外边距等盒模型属性；
块级元素可以包含块级元素和行内元素；
常见的块级元素有：<div>、<h1> ~ <h6>、<p>、<ul>、<ol>、<dl>、<table>、<address>、<form> 等。

行内元素：

行内元素不会独占一行，只会占领自身宽高所需要的空间；
给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用；
行内元素一般不可以包含块级元素，只能包含行内元素和文本；
常见的行内元素有 <a>、<b>、<label>、<span>、<img>、<em>、<strong>、<i>、<input> 等。

值得注意的是，给 img 标签设置宽高是可以影响图片大小的，这是因为 img 是可替换元素 (opens new window)，可替换元素具有内在的尺寸，所以宽高可以设定。HTML 中的 input、button、textarea、select 都是可替代元素，这些元素即使是空的，浏览器也会根据其标签和属性来决定显示的内容。

而 inline-block 又是什么呢？顾名思义，作为行内块级元素，它既具有块级元素可以设置宽高的特性，又具有行内元素不换行的特性。我们给 div 标签设置 inline-block 属性看下效果。

（将块级元素的 display 属性设置为 inline-block 后的效果）

在上图中，我们没有设置 margin 值，但是 div 之间会有空隙，这是因为浏览器会将 HTML 中的换行符、制表符、空白符合并成空白符，关于消除中间空隙的办法，推荐阅读《去除 inline-block 元素间间距的 N 种方法 - 张鑫旭 (opens new window)》。

# position

参见《定位（position）》章节。

# float

参见《浮动（float）》章节。

# 布局示例：两栏布局

常见的两栏布局页面一般是左边固定宽度，右边自适应。这种布局相对简单些，大概的效果如下：

（两栏布局效果图）

先写出基础部分的代码：

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

1
2
3
4

.left {
  width: 100px;
  height: 150px;
  background-color: #FFB5BF;
}
.right {
  height: 150px;
  background-color: #94E8FF;
}

1
2
3
4
5
6
7
8
9

此时大体框架设计好了，.left 和 .right 目前是各自独占一行的，接下来调整样式来实现最终效果图，可以使用 3 种方式。

# 设置 display 为 inline-block

原理：inline-block 兼具块级元素可以设置宽高和行内元素不独占一行的特性。

方法：设置 .left、.right 的 display 为 inline-block。注意设置了 inline-block 的两个 div 之间会有间距，记得消除。由于左边是固定的，总的宽度是 100%，要计算右边的宽度，可以使用 calc (opens new window) 来计算。

.container {
  font-size: 0;   /* 消除间距 */
}
.left, .right {
  display: inline-block;
}
.right {
  width: calc(100% - 100px);   /* 计算宽度，运算符号左右一定要有空格 */
}

1
2
3
4
5
6
7
8
9

# 使用 float

float 变化多端，下面又能给出三种利用浮动的特性来达到上图两栏布局的方法。

# 第一种方法

原理：处于文档流中的块级元素无法感知到浮动元素的存在。

方法：设置 .left 为左浮动，此时 .right 会当 .left 不存在，由于块级元素的默认宽度是父级元素的 100%，此时 .right 的宽度就已经是 100% 了，无需再计算。然后设置 .right 的 margin 值来给 .left 预留空间（左外边距等于 .left 的宽度）。

.left {
  float: left;
}
.right {
  margin-left: 100px;   /* 为 .left 留出空间 */
}
.container {
  overflow: hidden;   /* 别忘了清除浮动 */
}

1
2
3
4
5
6
7
8
9

# 第二种方法

原理：浮动元素会脱离文档流，直到它碰到父元素的边框或另一浮动元素为止。

方法：设置 .left、.right 均左浮动，这时，它们便会紧贴着排列在一行。因为 .right 是浮动的，所以需要计算宽度。

.left {
  float: left;
}
.right {
  float: left;
  width: calc(100% - 100px);
}
.container {
  overflow: hidden;
}

1
2
3
4
5
6
7
8
9
10

# 第三种方法

原理：BFC 不会忽视浮动元素

方法：设置 .left 为左浮动，接下来让 .right 形成 BFC，.right 就不会和 .left 重合了。

.left {
  float: left;
}
.right {
  overflow: auto;    /* 形成 BFC */
}
.container {
  overflow: hidden;
}

1
2
3
4
5
6
7
8
9

# 使用 absolute

原理：给元素的 positon 属性设置 absolute、fixed 时便会脱离文档流，不再遵循从上到下，从左到右的规律了。

方法：设置 .left 的 position 为 absolute，.left 脱离了文档流，.right 会无视 .left 的存在。此时 .right 的宽度是 100% 了，然后设置一下 margin 值。

.container {
  position: relative;
}
.left {
  position: absolute;
}
.right {
  margin-left: 100px;
}

1
2
3
4
5
6
7
8
9

# 布局示例：三栏布局

三栏布局用于需要两边固定宽度，中间自适应的场景，并且主要内容要优先渲染，按照 DOM 从上至下的加载原则，中间的自适应部分要放在前面。

常见的三栏布局便是圣杯布局和双飞翼布局了。

# 圣杯布局

首先将布局的基础框架搭出来，在下面代码中，父 div 包含了三个子 div，将 .center 写在最前面，方便最先渲染。为了保证窗口缩小时仍然能展示，给 body 设置了最小宽度。

<div class="container">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

1
2
3
4
5

body {
  min-width: 630px;
}
.center {
  width: 100%;
  height: 150px;
  background-color: #94E8FF;
}
.left {
  width: 100px;
  height: 150px;
  background-color: #FFB5BF;
}
.right {
  width: 200px;
  height: 150px;
  background-color: #8990D5;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

刷新浏览器，效果如下：

（基本框架效果图）

因为 div 默认是块级元素，此时三个子 div 会各占一行显示，接下来给三者都加上左浮动。

.container {
  overflow: hidden;   /* 清除浮动 */
}
.center, .left, .right {
  float: left;
}

1
2
3
4
5
6

由于 .center 设置了 100% 的宽度，所以 .left 和 .right 都被挤到下面去了，为了让它们上去，需要用到 margin 的负值。

要想让 .left 回到 .center 的最左边，便是要向左移动 .center 的宽度，即 100%；

.left 移动了之后，.right 会自动补上 .left 的空位，此时，.right 想要达到 .center 的最右边，只需要向左移动它自己本身的宽度就可以了，即 200px。

.left {
  margin-left: -100%;
}
.right {
  margin-left: -200px;
}

1
2
3
4
5
6

（通过使用 margin-left 让左右两边元素上移）

这个时候貌似是实现了圣杯布局，但仔细一看发现，.center 的文字被遮挡了，此时 .left、.right 都覆盖在 .center 的上面，我们要给两者留出位置。

圣杯布局的做法是先设置父元素 .container 的 padding 属性，给 .left、.right 留出空间，两者需要的空间大小便是两者的宽度。父元素设置 padding 后，所有子元素都往中间挤了，这时利用定位属性将 .left、.right 分别向左向右拉到准备好的空位。

.container {
  padding-left: 100px;
  padding-right: 200px;
}
.left {
  position: relative;
  left: -100px;
}
.right {
  position: relative;
  right: -200px;
}

1
2
3
4
5
6
7
8
9
10
11
12

（父元素设置 padding 给左右两边的元素留空间，使用相对定位让左右两边元素归位）

到这里，圣杯布局便完成了，它的核心思想是使用浮动布局，用 padding 为左右元素留空间，灵活使用 margin 的负值和相对定位让元素移动到相应的位置。完整的代码示例如下：

# 双飞翼布局

双飞翼布局与圣杯布局的前部分一样，在给左右两边元素留出位置的思路有区别。

圣杯布局是设置了父元素的 padding 留出空间，之后利用 relative 来归位。

双飞翼则是多加了一个 div，将中间自适应部分包裹起来，利用子 div 的 margin 来给左右元素留空间。

<div class="container">
  <div class="center-container"> <!-- 新增的 div -->
    <div class="center">center</div>
  </div>
  <div class="left">left</div>
  <div class="right">left</div>
</div>

1
2
3
4
5
6
7

body {
  min-width: 630px;
}
.container {
  overflow: hidden;
}
.center-container {
  width: 100%;
  float: left;
}
.center-container .center {
  height: 150px;
  background-color: #94e8ff;

  margin-left: 100px;   /* 新添加的属性 */
  margin-right: 200px;   /* 新添加的属性 */
}
.left {
  width: 100px;
  height: 150px;
  background-color: #ffb5bf;
  float: left;
  margin-left: -100%;
}
.right {
  width: 200px;
  height: 150px;
  background-color: #8990d5;
  float: left;
  margin-left: -200px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

同样的问题，双飞翼布局通过多加一个 div 并使用了 margin 来实现，圣杯布局则是使用 padding、相对定位（relative）、设置偏移量（left、right）来实现，相对来说，双飞翼布局更容易理解。在圣杯布局中，无限缩小屏幕（假设没有设置 body 的最小宽度），当 .center 的宽度小于 .left 时，会出现布局错乱。

（完）

BFC Flexbox 布局