CSS 布局经典问题 时间：2017-08-21     来源：CSS 布局经典问题初步整理

本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，等等。

三栏式布局

涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，它们实现的效果是一样的，差别在于其实现的思想。

圣杯布局

圣杯：父盒子包含三个子盒子(左，中，右)

中间盒子的宽度设置为 width: 100%; 独占一行;

使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;

.left {margin-left:-100%;} 把左边的盒子拉上去

.right {margin-left：-右边盒子宽度px;}把右边的盒子拉上去

父盒子设置左右的 padding 来为左右盒子留位置;

对左右盒子使用相对布局来占据 padding 的空白，避免中间盒子的内容被左右盒子覆盖;

双飞翼布局

双飞翼：父盒子包含三个子盒子(左，中，右)，中间的子盒子里再加一个子盒子。

中间盒子的宽度设置为 width: 100%;独占一行;

使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;

在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left和 margin-right来为左右盒子留位置;

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

两种方法基本思路都相同：首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。

主要区别在于 如何使中间盒子的内容不被左右盒子遮挡：

圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位;

双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。

简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。

利用浮动实现

我自己使用浮动也实现了三栏式布局：左边盒子左浮动，右边盒子右浮动，中间盒子利用 margin-left

和margin-right来为左右盒子留位置，同时父盒子设置 overflow: auto;来避免子盒子溢出。

负 margin

简单总结几点：

不使用 float 的话，负 margin 元素是不会破坏页面的文档流。所以如果你使用负 margin 上移一个元素，所有跟随的元素都会被上移(而 relative 定位的元素则不同，会保留原位置，影响文档流)。

当 static 元素的 margin-top/margin-left 被赋予负值时，元素将被拉进指定的方向。

如果你设置 margin-bottom/right 为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

当元素不存在 width 属性或者 width: auto的时候，负 margin 会增加元素的宽度.

margin-top 为负值不会增加高度，只会产生向上位移;margin-bottom 为负值不会产生位移，会减少自身的供 CSS 读取的高度，影响下方的元素位置;上下相邻的元素两者均为负时，效果不叠加，取负值更多的那个效果。

清除浮动

大体分为两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear: both属性，after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;

其二，通过设置父元素 overflow或者 display: table属性来闭合浮动

居中布局

水平居中

对于行内元素(inline)：text-align: center;

对于块级元素(block)：设置宽度且 marigin-left和 margin-right是设成 auto

对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;;或者使用 flex 布局

垂直居中

已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度

未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

使用 Flexbox：选择方向，justify-content: center;

单行：设置上下 pandding 相等;或者设置 line-height和 height相等

多行：设置上下 pandding 相等;或者设置 display: table-cell;和 vertical-align: middle;;或者使用 flex 布局;或者使用伪元素

对于行内元素(inline)

对于块级元素(block)：下面前两种方案，父元素需使用相对布局

水平垂直居中

定高定宽：先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉

高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);

使用 Flexbox：justify-content: center; align-items: center;

响应式设计

响应式设计(Responsive Design)” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略。

媒体查询(Media Queries)是做此事所需的强大的工具。

注： Responsive Web Design = RWD，Adaptive Web Design = AWD

RWD：

。采用 CSS 的 media query 技术

。流体布局(fluid grids)

。自适应的图片/视频等资源素材

(为小、中、大屏幕做一些优化，目的是让任何尺寸的屏幕空间都能得到充分利用)

AWD：

。CSS media query 技术(仅针对有限几种预设的屏幕尺寸设计)

。用 JavaScript 来操作 HTML 内容

。在服务器端操作 HTML 内容(比如为移动端减少内容，为桌面端提供更多内容)