版权声明：原创文章，转载请附加链接。 https://blog.csdn.net/qq_36749611/article/details/87630215
静态布局
- 固定样式的布局，不会根据屏幕的变化而变化，多余的内容会被覆盖，以滚动条的形式展现。
自适应布局
- 自适应布局分别为不同的屏幕分辨率定义布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。
- 依赖于@media 媒体查询，给不同类型设备切换不同的样式。
流式布局
- 流式布局在CSS2时代就有，主要是靠百分比进行排版，元素可缩放，但布局不变化。
- 缺点明显：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，在某些设备下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。
响应式布局
- 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
- 响应式布局的关键技术是CSS3中的媒体查询，监测设备屏幕大小，通过css媒体查询来有针对性的更改页面的布局，可以监测屏幕方向(移动设备)，设备类型等等，核心在于感知。在不同屏幕下可以显示不同版式，响应式是用于解决设备兼容问题
- 优点：面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题
- 缺点： 兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间加长
弹性布局
- 传统的布局解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
- 弹性布局也称Flex布局，是W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。
- 详情点击
http://www.runoob.com/w3cnote/flex-grammar.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
PS：
px,rem,em区别
- 三者都是尺寸单位
- px：像素，比较精确的单位，但不好做响应式布局
- em是相对其父元素，在实际应用中相对而言会带来很多不便
- rem是始终相对于html大小，即页面根元素