前言
前端开发中，经常遇到不同场景的布局问题，页面的布局框架是前端开发基础。本文将页面开发基本流程进行梳理并总结，在此基础上进行css常见布局进行梳理。
布局单位
常见的单位包括px，%，em ，rem，vw/vh。
- 像素：是页面布局的基础，1像素表示终端所能显示的最小区域，
- 百分比：当浏览器宽高发生变化时，通过百分比单位可以使得浏览器中的组件的宽高随着浏览器变化而变化。
- em和rem：它们都是相对长度，不同的是，em相对与父元素，rem相对于根元素。
- vw和vh：vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
- vw：相对于视窗的宽度，视窗宽度是100vw；
- vh：相对于视窗的高度，视窗高度是100vh；
- vmin：vw和vh中的较小值；
- vmax：vw和vh中的较大值；
vw/vh和百分比的区别在于，一个是相对于视窗尺寸，一个是相对与祖先元素
布局思路
确定整体布局
- 先把整个页面拆分成
顶部，底部和主体。掌握主体布局是一个前端必不可少的技能，养成看设计图就能大概规划出整体布局的前提是必须熟悉这些主体布局的特点与构造。 - 通常还有
常见布局
经典布局
position + left/right/top/bottom
三部分统一开启position,使用left:0和right:0将其左右拉伸填满contain,顶部和底部分别使用top：0和bottom：0
通过绝对定位的方式将三部分固定在特定位置，使其互不影响。
flex
两栏布局
特点：一边固定，一边自适应。
float+overflow
flex
三栏布局
特点：两列固定，最后一列自适应。
float+overflow
flex
圣杯布局和双飞翼布局
圣杯布局
特点：两边固定，中间自适应。
- 容器大小就是中间主体部分
- 通过
padding给容器留空 - 两边通过
float+margin的方式进行填充空白
padding+float+margin（过时）
双飞翼布局
为了解决，中间内容溢出的问题。
跟圣杯布局类似，比他多个子元素div,用于内容填充。
padding+float+margin （过时）
flex (推荐)
