聊聊CSS中的布局模式

聊聊CSS中的布局模式
在大家的印象中，CSS非常的简单，在此我想再强调一下，虽然CSS简单，但并不代表容易。随着Web技术的发展飞快，CSS经过二十多年的发展，其变化也是非常的大。CSS涵盖的技术点也非常的多，其中的每一个点都足够我们发很多的时间去探讨。那么今天我们就一起来聊聊CSS中的布局模式，因为在任何的Web网站和Web应用都离不开布局。对于众多的布局模式，我们应该怎样给Web产品选择最适合的布局模式呢？希望这篇文章对大家了解或者给Web产品选择布局模式有所帮助。

Web的演化路程
在互联网的演化过程中，Web网站（网页制作）是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

随着网页从学术机构走向公众社会，网页承载的功能便超出了学术范围而变得愈加丰富，因此早期网页的局限性也逐渐显露出来。

2005年以后，互联网进入了Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端也由此发生了翻天覆地的变化。网页也不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更多好的使用体验，这些都是基于前端技术实现。

技术发展日新月异，现在业内人员开始提出Web 3.0的概念。最常见的解释是，网站内的信息可以直接和其他网站相关信息进行交互，能通过第三方信息平台同时对多家网站的信息进行使用；用户在互联网上拥有自己的数据，并能在不同网站上使用；完全基于Web，用浏览器即可实现复杂系统程序才能实现的系统功有；用户数据审计之后，同步于网络数据。

Web的整个演化走过了Web1.0和2.0，即将迎接Web3.0（或者说Web 3.0已经到来了），在每个过程都有相应的产物出来，比如下图所示：



上图的录频来自于evolutionoftheweb.com。这个网站演示了整个网络的演进过程以及演进过程中相应产生的产物。感兴趣的可以点击这里详细了解。

上面的网站只演示到2012年，与当今相比，已有近六年的差距，但对于Web的前面发展史还是足以帮助我们进行Web发展的进程。

今后的发展，将会是Web 4.0的世界，智能化机械、生物科技等，可能正如电影Matrix所言，做成“天网”的电脑智能系统，希望电脑不会控制人类。

扯了这么多，简单的归纳一下Web（说互联网技术更为准确）的演变的历史大致如下：

1990~2000年，Web 1.0（Web，网作用：连接知识）：主要包括网页搜索引擎、网站、数据库、文件服务器等
2000~2010年，Web 2.0（Scocial Web，社会网作用：连接知识）：引入了社区、RSS、Wiki、社会化书签、社会化网络等概念
2005~2020年，Web 3.0（Sementic Web,语义网作用：连接知识）：由本体、语义查询、人工智能、智能代理、知识结点、语义知识管理等构成
2015~2030年，Web 4.0（Ubiquitous，无所不在的网作用：连接情报）：具体内容还不大清楚，我想Web 4.0的含义关键在于它在任何时候，任何地方能够提供给你任何需要的东西。
用下图来展示Web每个阶段的发展历程：



布局演变史
通过前面的内容，或许你对Web的发展历史有了一定的了解。可以说整个Web在不断的演进，那么为Web服务的理念与技术等等也在不断的进行演化。而我们今天要要聊的话题是Web布局（Web网站或Web应用程序的布局），它也在Web不同的演化过程也有相应的演进。接下来就回到我们今天要聊的主题当中。

在Web布局整个演进过程当中，经历了没有任何布局、表格布局、定位布局、浮动布局、Flexbox布局等布局模式。除了这些我们常看到的布局之外，即将还会有Grid、Shapes（类似杂志不规则布局）这些现代的布局模式。这些布局模式从侧面也反映出其自身是Web演进过程中的一种产物，都承载了自己在当时那个时期的史命。

用@Jen Simmons的一张图来表达，更为贴切一些：



对于布局，我们还可以按类型和功能来进行分类。先来看按类型分类的布局模式：

无任何布局模式
表格布布局模式
浮动布局模式
定位布局模式
多列布局模式
Flexbox布局模式
Grid布局模式
不规则布局模式
另外除了类型分类，还可以按功能模式来分类：

静态布局（Static Layout）
流式布局（Liquid Layout）
自适应布局（Adaptive Layout）
响应式布局（Responsive Layout）
接下来简单的看看每种布局的模式承载的史命。

无任何布局模式
历史上最早的一个网页是1990年12月20日，欧洲核子研究组织（CERN）的科学家家蒂姆.伯纳斯.李在瑞士的研究中心创建的，最初仅为CERN内部的科学家所使用。在这个阶段，网站的内容主要是文字内容和图片为主，制作方法非常的简易。比如万维网（WWW），欧洲核子研究组织的一帮科学家为了方便看文档，传论文而创造的。这个时候的Web网页主要是基于Document。Document就是用标记语言加上超链接写成的由文字和图片构成的HTML页面，这样的功能已经完全能满足学术交流的需要，所以网页的早期形态和Document一样，完全基于HTML页面，并且所有内容都是静态的。比如下图所示：



表格布局模式
很长的一段时间，，多页就只有文字信息和图片组成，而且只是为了查看内容。为了让页面好看一点，主要装饰还是依赖于HTML自带的标签的属性。随着Web技术的发展，HTML也越来越成熟。而Web呈现给用户的不仅仅是文字浏览，网络制作者希望制作出来的页面能更适合用户的浏览，或者想让其能像Word这样的排版软件制作出来的文档。这个时候很多网页开始依赖HTML的表格标签来对Web进行布局。在那个时候喜欢使用可视化软件来直接制作网页，比如FrontPage、DW这样的。下图就是DW制作网页的一个简易图：



比如2005年的淘宝页面，就是用表格制作的，如下图所示：



也可以说表格的布局是Web早期CSS不存在的时候兴趣的，是对table标签不正规使用（它是表格标签），天生就是用来显示数据的，而不是用来给网页布局的。

W3C说，表格可以用来容纳文字、图片、链接、表单以及表格等。但表格不应该单纯用来做网页布局，理由是，当Web被非可视化设备渲染的时候，表格会出问题，他们指定是屏幕阅读器以及盲文浏览器。另外，表格在大型显示设备上会强迫用户左右滚动。虽然W3C说不建议用表格来布局，特别是在CSS出现之后，更是被人嫌弃，事实上对表格的责难主要有：

代码臃肿
页面渲染性能问题
不利于搜索引擎优化
可访问性差
不够语义
事实上，表格也并不是一无是处，他也有自己的优点：

可观性好，当用户插入一个表格的时候就可以立即看到效果
简单方便，适合初入门的用户操作
可读性好，稍微懂一点HTML的同学就能看懂
特别是CSS越来越成熟的时候，表格对于布局而言已经退出了历史的舞台，但并不是说<table>标签就再也不使用了。前面也说过了，<table>表生就是用来显示数据的，所以不管什么时候，表格用来显示数据还是最佳的一种方式。

如果你追求完美，又不想使用表格的显示数据，那也不要紧，你可以使用table和table-cell来模拟表格的布局模式。比如：

<table>                     //display:table;
    <thead>                 //display:table-header-group;
        <tr>                //display:table-row;
            <td>1</td>      //display:table-cell;
            <td>2</td>
        <tr>
    </thead>
    <tbody>                 //display:table-row-group;
        <tr>
            <td>3</td>
            <td>4</td>
        <tr>
    </tbody>
</table>    
特别是在移动端，如果你想对底部的工具栏有一个等分列的布局效果，使用display:table和display:table-cell将也是种完美的方案。只不过你需要添加width: 100%和table-layout:fixed。

定位布局
随着CSS的强大和HTML更多元素标签的出现，布局不在局限于表格。而对于后端或者说早期的前端人员（网页设计师），常采用的布局是CSS中的position各属性（fixed、absolute等）来布局。这种方式的布局能让你快速达到想要的布局效果。当然也有很多同学直接尝试采用 PSD2HTML这样的类似工具，直接将设计图转换成Web页面。虽然这种方式能快速实现Web的布局效果，但也受到很多的局限性：

需要明确指定元素的大小
需要明确计算元素位置坐标
难于维护
或许其中还有很多其他不利的因素。因此，这样的布局也并算是一种好的布局模式，但对于不太懂CSS的同学而言，这是一种简单易懂的布局。

在实际布局当中，模态弹出框和固定页头，页脚有常见定位布局的身影，特别是水平垂直居中：

.center {
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
如果你使用PSD2HTML这样的工具转换出来的页面（特别早期的Photoshop或者Firework制图软件切片导出的页面），基本上都是使用定位布局。

浮动布局
其实CSS中的浮动布局，它的初衷并不是用来布局的，而是用来处理文本的一种排版方式。但是广大的CSSer发挥其无穷的智慧，硬是将其用于Web的布局中，而且这种布局方式成为一种主流的布局方式，并且持续了很多年。直到Flexbox布局的出现和移动端的兴起，浮动布局才慢慢的被其取替。

特别是在2004年傅捷、王宗义和祝军翻译了美国塞尔达曼（Zeldman J.）的著作《网站重构》一书。



这本书受到广大Web爱好者的青眯，可以说让国内整个前端行业（那时候还没有前端这样的职位）发生了很大的一个变化。我记得那时候，淘宝UED说：“我们要做地球上最优秀的前端”。

这本书称得上是给整个行业带来了革命性的变化，而就这场革命也造就了“21世界最大的IT冤案”。为什么说是21世界最大的IT冤案呢？只要2004年以后看了这本书的同学（并不是所有同学(^_^)），只要看到Web页面源码中有table标签，就会说这个不行，写这个页面的人不专业，页面也是垃圾，不符合W3C规范。其实这本书从来也没有说网页出现table标签就是垃圾网页，就是不符合W3C标准的页面。

除了造成21世纪最大的IT冤案之外，还有灾难性的DIV+CSS的泛滥。出现最多的词就是div，大家觉得我会div，我就很高大上。而且整个页面下来，除了div，就是div。什么p标签、span标签基本上是找不到。这个时候就是div的泛滥，根本也没有什么语义化，可读性一说。

感觉有点跑题了，还是回到正题中来。在使用浮动布局这些年当中，从中还演变出来很多布局方式，比如后面要聊的静态布局、流式布局、自适应布局和响应式布局等。

在CSS的布局模式当中，浮动布局经历的时期是最长的，持续了十多年的历史。在这个时期也演变出很多经典的布局。其中要属“圣杯”和“双飞翼”两者最为经典。这两种方法实现的都是三栏布局，两边的固定宽度，中间自适应，它们实现的效果是一样的，差别只是实现的思想。

圣杯布局

圣杯布局：左、中、右。中间的宽度为100%，独占一行。使用负边距（margin-left）把左右两列拉到和中间列同一行。

左列使用margin-left:-100%
右例使用margin-left: -右列宽度
同时左、中、右三列的容器设置左右padding来给左右两列留下相应宽度（左、右列宽度）。

<!-- 圣杯的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>

/*CSS*/
.container {
    width: 480px;
    margin: 20px auto;
    padding-left: 240px;
    padding-right: 240px;
    overflow: hidden;
    border: 1px solid red;
}

.middle {
    width: 100%;
    background: green;
    float: left;
}

.left {
    margin-left: -100%;
    width: 220px;
    background: orange;
    position: relative;
    float: left;
    left: -240px;
}

.right {
    margin-left: -220px;
    width: 220px;
    background: yellow;
    position: relative;
    right: -240px;
    float: left;
}
双飞翼布局

双飞翼布局和圣杯布局类似，也是左，中，右三列，中列里面会再套一个容器。

中列宽度设置为100%
使用负边距margin-left把左右两列拉到和中列同一行
在中列内的容器div设置margin-left和margin-right给左右两列留下对应的空间
实现代码也很简单：

<!-- 双飞翼的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">
        <div class="middle-inner">中间弹性区</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>

/*CSS*/
.container {
    width: 960px;
    margin: 20px auto;
    overflow: hidden;
}
.middle {
    float: left;
    width: 100%;
}
.middle-inner {
    margin: 0 240px; /*留出距离*/
    background-color: yellow;
}
.left {
    float: left;
    width: 220px;
    margin-left: -100%;
    background-color: red;
}
.right {
    float: left;
    width: 220px;
    margin-left: -220px;
    background-color: green;
}
圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。这样做主要是因为早年的网络和设备没有现在这么优秀，为了让主要的内容先向用户呈现，所以很多时候都使用这两种布局方式。甚至可以说，现在很多人都还在使用这两种布局方式。但如果你继续阅读后面的内容之后，你会慢慢放弃浮动布局。虽然在布局的历史中，他承载了相当长的一段时间的使命，但有更好的，更适合的方式，我们应该要学会选择与放弃。

多列布局
这里要说的多列布局，并不是前面的布局模式产生的多列模式。而是CSS的Multi-column布局模块。你可能想得到，这个模块给予了我们脱离position和float这些属性，就能在网页上实现多列布局的能力。

同样，根据容器的大小，就可以控制创建栏目的数量，这是非常了不起的一个特点。Multi-column对应的CSS属性还具有以下一些功能：

定义栏目的最大宽度
定义在多栏目之间的间距
在多个栏目中平均分配好显示的内容
Multi-column好就好在能够自动为你安排好流体内容，你用不着计算确定栏目的数量，让他们排排站好就行了。

这种布局，就算是在现在，使用的人也不多，必须像报纸这样的多列布局的风格并不多，但借助他的特性，我们可以实现一些特殊的布局风格。比如瀑布流的布局：



由于代码过多，就不在这里列出了，如果对代码感兴趣的话，可以点击这里查看，具体实现的步骤，可以阅读《纯CSS实现瀑布流布局》一文。

除此之外，多列布局还常用于下图这样的布局风格：



Flexbox布局
Flexbox是CSS的一个新特性，这个新特性解决我们以前在CSS中很多麻烦问题，比如说内容的伸缩与扩展、垂直居中、等分列、等高列等等。当然，这个属性也大量的运用于布局当中，特别是在面对品种繁多的移动端的局面下，Flexbox用于布局的优势也显现的更为强大。从而慢慢的用来取代了CSS中的浮动布局。

使用Flexbox来布局，现在随处可见。比如@Zoe Gillenwater整理的相关教程和资料。里面有很多关于Flexbox的内容。这里我放几张图来演示Flexbox实现布局是多么的简单和灵活。







时到今日，使用Flexbox的场景也越来越多，在将来使用Flexbox场景将会更多。

网格布局
前面说过早期的Web页面仅仅是用来展示文本信息和图片。但对于现在的Web页面，不仅仅是这样了。随着这么多年的发展。现在大量的网页设计都是基于网格布局。虽然人们通常注意不到它，但事实上杂乱无章的布局时代确实已经过去了，现在是整齐结构化的天下。无论从理论、美学和整齐来说，这样的布局都很好平衡。网格结构是所有现代网站的基础，它总能级最终用户完美无暇的设计。

对于网格系统而言，它也经历了一个漫长的演变。表格布局虽然痛苦，但可以说表格是网格系统布局的最初模型。



正因为有表格布局的存在，才有了后面的CSS网格系统，不管是早期基于浮动完成的网格系统，还是后期依赖于Flexbox完成的网格系统。当然，你可有会说，网格系统的鼻祖不是960gs？



虽然960gs是最早出现的网格系统（基于浮动布局），但其网格的思路是来源于表格的。因为表格具有明显的栅格风格，只不过是使用其它的布局模式，快速模拟了表格的风格，甚至是嵌套表格的网格。加上网格系统让Web的设计变得结构整齐、布局平衡等。受到众多设计师的青眯，也让撸码的同学更易实现，并且可以依据此思路制定一套系统，比如很多CSS的Framework都有类似的网格系统布局（不管是浮动还是Flexbox实现的）。不管怎么说，这些网格系统可以达到较好的效果，甚至还可以基于此系统制作工具，通过工具帮助大家快速完成布局。

前面我们说了很多种Web的布局模式，但这些布局模式都局限于单维（一维）方向。但对于现代Web页面的布局，很多时候我们需要的不仅仅是单维的布局，希望在两个维度都能更好的控制我们的布局。比如下面这样的一种布局。



前面介绍的每种布局模式都可以实现上图这样的布局效果，但要实现具有可扩展性，并且自适应强的并不容易实现。归根究底，前面的这些方法都是单维控制的，只能控制一个方向，对于另一个方向就不好控制了。

不过，值得庆幸的是。CSS推出的CSS Grid布局模块，可以很好的解决这个问题。因为CSS Grid布局打破了以前所有布局方式的维度，它是一个双维度的布局模块。它除了可以灵活的控制水平方向之外，还能轻易的控制垂直方向的布局模式。对于上图那样的九宫格布局，它就可以轻而易举的完成。

可以说，CSS Grid布局才是Web中的布局模块，随着浏览器对其支持度越来越强的情况下，它将更会受到青眯。也将成为未来Web布局中的霸主。

特别是将CSS Grid布局和Flexbox布局两种模式结合在一起，那对于布局言就不会有什么难事。比如下图这样的布局：



不规则布局
我们常看到的Web布局一般都是遵循按行和列等线性原则，Web网站的布局到今天为止很大程度上受到这些原则的影响。虽然CSS Grid的出现让布局变得更好，更灵活，但相对于印刷媒体而言，Web布局总体上还是受到很多的限制，特别是内容流上。

杂志和报纸一直有很好的办法来安排内容。比如文本绕着非矩形排列。



而CSS的Shapes模块让Web布局能像杂志和报纸一样让文本内容实现不规则矩形排列。

CSS Shapes使网页设计师能更好的实现自己的创意，除了简单的长方形和正方形，还可以实现任何几何图形布局。

除了上述的这些类型的Web布局之外，其实在CSS中还可以借助display的强大属性实现一些类似于前面介绍的布局类型，比如inline-block、table和table-cell。但这并不是这里要详细聊的内容，感兴趣的同学自己可以尝试。

上面花了一些篇幅和大家聊了一些Web常见的布局类型。但很多时候，除了上述的布局类型之外，我们还可以看到类似于静态布局（固定布局）、流式布局、自适应布局和响应式布局等。接下来就简单的聊聊这几种布局。

选择固定布局、流式布局、弹性布局还是响应式布局？可以说这个问题时常都会困绕着Web开发人员，特别是对布局并不熟悉的开发人员。因为每种布局都有它的优点和缺点。最后的选择往往取决于需求，而不是哪个更简单。从这些方面进行考虑，更为恰当。

静态布局
静态布局其实就是一种固定宽度的布局，不管是一列，两列还是多列。这种布局有一个设置了固定宽度的容器，里面的各个模块也是固定宽度而非百分比。重要的是容器元素设置为不能变化。不管网站浏览用户的屏幕（显示器）的分辨率是多少，网页都显示为和其它访问者相同的宽度。比如早期最为流行的960px的固定宽度布局。整个页面的内容都在960px的容器中，而且水平居中显示。比如下图所示：



流式布局
流式布局很多时候也被称为百分比布局，主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作就是网格系统。最大的特色就是网页中主要的区域尺寸使用百分比，并配合max-width和min-width来布局。



很多同学喜欢固定宽度布局胜过于流式布局，因为它更易实现，并确保了设计者所见即用户所见。而且也无需更多的比例计算。

这种布局方式Web前端开发的早期历史上，用来应对不同尺寸的浏览器屏幕，在当今的移动端开发也常用这种布局方式。但期有一个明显的缺陷：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

响应式布局
随着CSS媒体查询技术的成熟，出现了响应式设计概念。响应式设计的目标是确保一个页面在所有终端上都能显示出令人满意的效果。分别为不同的屏幕分辨率定义布局，同时在每个布局中，应用流式布局的理念。也可以把响应式布局看作是流式布局和自适应布局设计结合的产物。



总结
历史是不断向前的，技术也是如此。虽然CSS在众多同学眼里是一件轻松的事情，但事实并非如此。正如此文所介绍的CSS实现Web布局，这就不是一件轻松的事情，很多工作两三年的同学，都不一定能对Web布局实现达到手到擒来。除此之外，在未来，Web布局的模式将会越来越多，越来越强大，比如不久的将来，CSS Shapes能帮助我们打破矩形的布局模式，CSS的多列布局能让我们在Web中实现报纸排版的效果。或许还将会有其它的布局模式。我将继续努力将这方面的最新信息向大家呈现。