一、静态布局（Static Layout）
既传统web设计，就是我们初学者常用的布局方式，在屏幕宽高有所调整时，使用横向和竖向的滚动条来查阅被遮掩部分。
就是不管浏览器尺寸多少，网页布局就按当时写代码的布局来布置;
1. 优点：
一般采用css2之前的写法，不存在浏览器兼容性。布局简单。
2. 缺点：
移动端和pc端不能使用同一个页面，两个页面的布局不一致，移动端需要自己另外一个布局并使用自己另外设计一个布局并使用不同域名呈现。
二、弹性布局（Flexible Box）
弹性布局是CSS3引入的强大的布局方式，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局
.box{
display: flex;
}
行内元素也可以使用Flex布局
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询
flex布局也不是真正的弹性布局，因为百分比布局和flex布局都只是实现了宽度方向的等比缩放，高度是不变的（图片除外）！！rem布局是宽高同时缩放，保证了元素宽高比，即元素时“”相似的“”，不会变形！
关于弹性布局的剧痛实现方法后面会用一个专门篇幅来进行讲解
三、自适应布局（Adaptive Layout）
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1. 优点
自适应网站设计可以在网页地址不变的情况下满足用户在不同设备上浏览访问的需求，同时方便网站内容的管理与更新、针对搜索引擎友好等特点，这也是自适应网站设计的最大优点。大家可以通过手机、平板、笔记本等不同的设备分别查看网站的自适应效果。
2. 缺点
通过众多的网站设计公司和网页设计师我们了解到自适应网站设计的主要有设计难、实现难、成本大三个缺点，也被大家称作通往自适应网站设计的三座大山。
-
设计难：自适应网站建设过程中，需要考虑的内容更为广泛，而且还有考虑其他方面的一些问题。比如可读性、区域面积及不同设备下运行的状态等。这对于设计师的要求甚高，这样导致要做一个完美自适应网站变得很难。
-
实现难：响应式网站主要是一HTML5、CSS3为基础，需要精通这两种技术的高手。现在能够将这两种技术运用到恰到好处的网站设计师并不多见，如果设计师对这两种技术不够精通，会导致就算设计师做出很棒的页面，但是实现以后，不会完全一模一样。
-
成本大：因为自适应设计需要对多个界面兼容、功能调试，导致整个制作过程需要UI设计师和前端工程师要不断磨合制作。而测试人员也要在不同的设备下对网站进行测试。自适应的网站需要有很多功能，比如界面的融合、功能的调试等，这些都是需要不断磨合才能实现，而这样的网站成本也就自然的比较高了。
四、 响应式布局（Responsive Layout）
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。
俗话说响应式布局指的就是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够
1.优点
- 面对不同分辨率设备灵活性强
- 能够快捷解决多设备显示适应问题
2.缺点
- 不能完全兼容所有浏览器，代码累赘，会出现隐藏无用的元素,加载时间加长
- 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
如何实现：
简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。
关于响应式布局的详解我将会在后面的博客中详细说明使用方法
总结：以上四种就是常用的前端布局方案，布局方案不是唯一。如何灵活应用才是构建出优秀网站的核心
