布局
三种布局
常规流，定位，浮动
- 常规流中包括各种格式上下文
- 行级格式上下文（IFC） 容器内只有行级元素生成 IFC 会避开浮动元素 一行显示不下会换行 有 text-align verticle-align 属性
- 块级格式上下文（BFC）
flex
flex
flex 简写 flex:1 === flex: 1 1 0 flex:100px === flex: 0 1 100px flex: 1 100px === flex: 1 1 100px flex:auto === flex:1 1 auto flex:none === flex: 0 0 auto
align-items
默认值为 stretch 有属性值 flex-start, flex-end, center, stretch, baseline 如果主轴是从左到右，align-items 自动将弹性子项延展到和容器一样高
定位
position 的取值：static(默认) relative absolute sticky
-
static 默认值，非定位元素,元素会像通常那样流入页面。顶部，底部，左，右，z-index 属性不适用。
-
relative 相对自身，！不脱离文档流，会留一个看不见元素占位
-
aboslute 相对非 static 的祖先定位，会脱离文档流;绝对定位的框可以有边距，并且不会与其他边距折叠。这些元素不影响其他元素的位置。
-
fixed 相对视口绝对定位
-
sticky 是相对定位和固定定位的混合。该元素被视为相对位置，直到它越过指定的阈值，此时它被视为固定位置
-
static（默认 值）：元素处于正常的文档流中，不进行任何特殊的定位。top、right、bottom、left 和 z-index 属性对其没有影响。
-
relative：相对定位。元素在正常文档流中的位置不变，但可以通过设置 top、right、bottom、left 属性来相对于其正常位置进行偏移。相对定位不会影响其他元素的布局。
-
absolute：绝对定位。元素脱离正常文档流，并相对于最近的已定位祖先元素或 body 元素进行定位。可以使用 top、right、bottom、left 属性进行定位。如果没有已定位的祖先元素，则相对于视口进行定位。
-
fixed：固定定位。元素脱离正常文档流，并相对于视口进行定位，即无论滚动条如何滚动，元素的位置都不会改变。可以使用 top、right、bottom、left 属性进行定位。
-
sticky：粘性定位。元素根据正常文档流进行定位，然后相对于离它最近的具有滚动机制的祖先元素或视口进行定位。当用户滚动页面时，元素的定位会发生变化。
display 的 block、inline 和 inline-block 的区别
- block：会独占一行，多个元素会另起一行，可以设置 width、height、margin 和 padding 属性；
- inline：元素不会独占一行，设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的 padding 和 margin；
- inline-block：将对象设置为 inline 对象，但对象的内容作为 block 对象呈现，之后的内联对象会被排列在同一行内。
不要使用 inline-block
开发模式标签之间的空格（回车）会被计算，但是生产环境代码编译后空格会消失 导致布局混乱
硬要解决：父元素的 font-size 等于 0,子元素如果要显示字体，就单独设置 font-size
inline-flex
一句话来描述就是 当 Flex Box 容器没有设置宽度大小限制时，当 display 指定为 flex 时，FlexBox 的宽度会填充父容器，当 display 指定为 inline-flex 时，FlexBox 的宽度会包裹子 Item