1. 隐藏DOM的几种方式
- display：none/block（脱离文档流）
- visibility：hidden/visibe
- opacity：0
- position：absolute并移到不可见区域，层级或者位置
- scale：0
- width，height，font-size，line-height：0
- translateX，translateY：-100%
- clip-path：剪裁（各种形状包括异形）
2. position：
- absolute相对于static（默认值） 定位以外的第一个父元素进行定位
- sticky：粘性布局，元素定位表现为在跨越特定阈值前为相对定位（relative），之后为固定定位（fixed）。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
3. 垂直水平居中
- 块元素：给自己设置margin:0 auto（水平）; 绝对定位后同时让元素4面都为0，然后使用margin:auto;（水平垂直）
- 行内/行内块元素：要求父级元素为块元素，在父级元素设置。text-align（水平），line-height（单行垂直），display:table-cell;vertical-align:middle;（多行垂直）
- box盒子
- flex盒子
- position+transform/cale/ margin：只不过cale可以直接计算百分比和数值距离
4. flex语法
www.ruanyifeng.com/blog/2015/0…
www.ruanyifeng.com/blog/2015/0…
- 容器属性
- flex-direction
- flex-wrap
- flex-flow：为flex-direction和flex-wrap的简写形式，两个参数值
- justify-content：在主轴的对齐方式，特殊值space-between，space-around
- align-items：在交叉轴的对齐方式，特殊值stretch（拉伸，默认值），baseline（第一行文字基线）
- align-content：在交叉轴的对齐方式，特殊值space-between，space-around，stretch（默认值）
- 项目属性
- flex：flex-grow，flex-shrink，flow-basis的缩写
- flex-grow：放大比例，默认0，即使有剩余空间也不放大
- flex-shrink：缩小比例，默认1，即空间不足，自动缩小，设为0则不会缩小
- order：定义属性排列顺序，越小越靠前
- flex-basis：项目占据的主轴基本空间，以此来计算是否空间是剩余还是不足。默认值auto，即项目本来的大小。
- align-self：单个项目与其他项目不一样的对齐方式（交叉轴）
- flex:0 1 auto（不增大，等比缩小，项目本来的大小）
- flex:auto（1 1 auto），等比增大，等比缩小，项目本来大小
- flex:none（0 0 auto），不增大，不缩小，项目本来大小
