静态布局
最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅
- 优点：不存在浏览器兼容性。布局简单
- 缺点：不会随着屏幕大小而变化
流式布局（百分比布局）
随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整
常见的类型：
左侧固定+右侧自适应
左右固定宽度+中间自适应
优点：元素宽高按屏幕分辨率调整，布局不发生变化
缺点：屏幕尺度跨度过大的情况下，页面不能正常显示
弹性布局
使用css3新特性flex进行的布局
- 优点：简单、方便、快速
- 缺点：CSS3新特性,存在浏览器兼容性问题
自适应布局
分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 你可以把自适应布局看作是静态布局的一个系列。 就是说你看到的页面，里面元素的位置会变化而大小不会变化
- 优点：对网站的复杂程度兼容性更大；对开发工程师来说制作的成本代价更低；代码执行效果更高效；测试时更加容易，运营相对更加精准
- 缺点：同一个网站往往需要为不同的设备制作不同的页面，不但会增加开发成本，还会因为客户的需求改变时，可能会改动多套代码、流程相比较来说较繁琐
响应式布局
不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的，自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局；利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局
- 优点：适应pc端和移动端，如果有足够的耐心，页面效果会很完美
- 缺点：只能适应主流的宽高；如果匹配足够多的设备屏幕的大小，对于工程师来说工作量不小，设计更需要多个版本，工作量增大
三列布局
- 左右两边宽度固定，中间宽度自适应；中间列的内容可以完整显示
- 定位实现
- 左右两列绝对定位并且固定宽度，中间元素自适应，且左右margin设置为左右元素的宽度
- 缺点：当出现滚动条时，内容区在滚动条后边显示，而且内容区仍旧被压缩(不推荐使用)
- 浮动实现
- 左右进行浮动展示
- 缺点：如果有文字出现，布局就会错乱，导致扩展性不好
- 定位实现
- 圣杯布局&双飞翼布局
- 随着页面宽度的变化，三栏布局中的中间盒子优先自适应渲染，两边盒子宽度固定不变
- 原理区别：
- 圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div
- 双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置
