Appearance
常见布局实现
静态布局（static）
- 静态布局是最为原始的布局方式
弹性布局（flexbox）
- 弹性布局可以简便、完整、响应的实现各种页面上的布局
自适应布局（bootstrap）
- 自适应布局分别为不同屏幕不同分辨率定义布局
流式布局（fluid）
- 流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整，但是整体布局不变
响应式布局（responsive）
- 通常使用@media媒体查询，和网格系统配合相对布局单位进行布局
浮动布局（float）
- 浮动布局进行调用浮动属性改变页面中元素的位置，浮动布局应该是目前各大网站用的最多的一种布局方式
定位布局（position）
- 定位布局时利用position属性控制页面元素设置一些不规则布局
布局参考资料
flex布局详解
- 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性
容器的属性
- flex-direction 决定主轴的方向
- flex-wrap 如何换行
- flex-flow 简写形式，默认值为row nowrap
- justify-content 定义了项目在主轴上的对齐方式
- align-items 定义项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式
项目的属性
- order 定义项目的排列顺序。越小越靠前
- flex-grow 定义项目的放大比例，默认为0
- flex-shrink 定义了项目的缩小比例，默认为1
- flex-basis 定义了在分配多余空间之前，项目占据的主轴空
- flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
- align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
水平垂直居中实现方式
居中元素定宽高
- absolute + 负margin
- absolute + margin auto
- absolute + calc
居中元素不定宽高
- absolute + transform
- lineheight
- writing-mode
- table
- css-table
- flex
- grid