你不知道的css各类布局（二）之流体布局、液体布局、栅格布局

流体布局

什么是流

在谈论流体布局之前我们需要知道一件事情就是何为“流”，所谓“流”就是“文档流”，是css中的一种基本定位和布局

概念

流体布局（Liquid/Fluid Layout）指的是利用元素“流”的特性实现的各类布局，流式布局采用了相对长度单位（%、em、rem、vm、vh）。典型的流式布局是采用百分比(%)作为主要区块的单位, 当然其他的相对单位(em)也是同样适用

布局特点

** 因为“流”本身具有自适应特性，所以流体布局往往都是具有自适应特性的，但是流体布局并不等同于自适应布局，自适应布局是对凡是具有自适应特性的一类布局的统称，流体布局要狭隘一些。

流体布局的特点是页面元素的宽度根据屏幕分辨率进行适配调整，但整体布局不变，这就导致如果屏幕太大或者太小都会导致元素无法正常显示，代表作栅栏系统（网格系统）

网页中主要划分区域使用百分比搭配（min-*、max-*属性使用）例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式

设计方法

使用%百分比定义宽度，高度和文字大小都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

如果用户的屏幕对于可用布局太小或太大，这两个属性便可以创建固定的宽度。在这种情况下，布局会产生滚动条，并且在功能上成为了固定宽度布局

总体框架

可以根据屏幕宽度改变了内容的宽度，也可以对空白区域使用了不同的宽度。

优点

• 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白；

• 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动；

• 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。

缺点

• 如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大相径庭，例如某些项目或元素挤压到一起，其周围出现意想不到的空隙；

• 如果一个固定宽度的元素位于一个不能容纳它的盒子里，那么这个元素就会溢出盒子。

• 设计者无法掌控用户看到的效果，并且容易忽视一些问题，因为在他们特定的分辨率屏幕上，布局看起来很好。

• 图像，视频和其他类型的内容可能需要多个宽度设置，以适应不同的屏幕分辨率。

• 难以置信的是，大屏幕分辨率可能会因为缺少内容而产生多余的空白空间，从而减少了美感。

• 无论当前浏览器宽度是多少，流式布局页面横向上通常会充满整个浏览器，所以它的缺点也显而易见。当浏览器宽度非常大时，页面内容会被拉伸的很宽，段落元素也会占满整个一行。相反的，当浏览器宽度很很窄时，页面元素会

　　   挤在一起。

注意

由于流体布局可以伸展到浏览器窗口的整个宽度，产生难以阅读的长文本行，所以有些流媒体布局只让页面的一部分伸展和收缩。在页面的其它部分则限制最大和最小宽度。

液体布局

液体布局是流体布局的别名

栅格布局

栅格布局是流体布局的一种