前端布局基础

前端布局种类：

1. 传统布局方案（借助浮动、定位等手段）
2. flex布局方案
3. grid布局方案
4. 流式布局(百分比布局)

传统布局方案

需要使用者熟练掌握元素的分类及布局特性、浮动原理和定位原理等众多基础知识，方能在解决各类前端布局问题时游刃有余，这不仅学习成本大，而且实现的复杂度也高，实现的CSS代码也不够精简、优雅。但由于其基础知识来源于CSS2，所以浏览器兼容性最好，对于用户是友好的

flex布局方案

正是为了解决传统布局方案的种种不便，而提出的一种新型改进方案，它不再需要借助浮动和定位等布局手段，而是通过父元素（flex box）单方面配置相关的CSS属性来决定子元素的布局规则，且在大多情况下无需子元素（flex item）参与，就能完成子元素间的布局问题，不仅学习成本低（公司之前有几个后端工程师亦能快速上手），且大大简化了布局的实现复杂度，CSS代码也更加精炼。美中不足的是IE10才开始支持，且需要使用-ms-前缀（IE11无需）

grid布局方案

是由微软提出，相对于传统布局方案和flex布局方案，它是一种二维布局方案，在IE10开始支持

流式布局

页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变