CSS样式
Flex布局
Flex布局基于Flexible Box模型，通常被称为flexbox，是一种一维的布局模型。对于Flex布局，我们主要需要掌握几个概念：
- flexbox的两根轴线：其中，主轴由
flex-direction定义，交叉轴则垂直于主轴。 - 起始和终止：传统布局的文档流是从左到右、从上到下的布局方式。而在flexbox中，我们使用起始和终止来描述布局方向和顺序。
- Flex容器：采用了flexbox的区域（
display属性值为flex或者inline-flex）叫做flex容器，容器中的直系子元素就会变为flex元素。通过flex-direction/flex-wrap/flex等各种属性设置，我们可以方便地设置容器内元素的布局效果。
使用Flex布局可以：
- 通过
flex-direction调整Flex元素的排列方向（主轴的方向） - 用
flex-wrap实现多行Flex容器如何换行 - 使用
justify-content调整Flex元素在主轴上的对齐方式 - 使用
align-items调整Flex元素在交叉轴上如何对齐 - 使用
align-content调整多根轴线的对齐方式
元素定位——position
-
sticky：生成滚动位置的定位，粘性元素相对于relative和固定fixed之间切换 ，元素的位置通过left/top/right/bottom属性进行规定，达到粘性定位起作用。 -
static(默认值)：没有定位，元素出现在正常的流中（忽略top/bottom/left/right或者z-index声明） -
inherit：规定应该从父元素继承position属性的值 -
relative：生成相对定位的元素，相对于其正常位置进行定位，relative特点包括：relative元素保持原有文档流，但相对本身的原始位置发生位移，且占空间relative元素也遵循从上到下，从左到右的排版布局- 相对于其正常位置进行定位，在这里设置了
relative的元素相对其原本位置（position: static）进行位移 relative元素占有原本位置，因此下一个元素会排到该元素后方relative元素占位不会随着定位的改变而改变，也就是说relative在文档流中占有的位置与其原本位置（position: static）相同
-
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left/top/right/bottom属性进行规定。absolute特点包括：absolute元素脱离文档流absolute元素不占位，因此下一个符合普通流的元素会略过absolute元素排到其上一个元素的后方absolute元素的定位是相对于static定位以外的第一个父元素进行定位
-
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left/top/right/bottom属性进行规定。fixed的特点：fixed元素脱离文档流fixed元素不占位fixed相对于浏览器窗口来定位，不管是否有static定位以外的父元素absolute元素会随着页面的滚动而滚动，而fixed不会
元素堆叠
元素的堆叠方式和顺序，除了与position定位有关，也与z-index有关，有关z-index的说明：
- 当同级元素不设置
z-index或者z-index相等时，后面的元素会叠在前面的元素上方 - 当同级元素
z-index不同时，z-index大的元素会叠在z-index小的元素上方
除了同级元素以外，z-index值的设置效果还会受到父元素的z-index值的影响，它只决定同一父元素中的同级子元素的堆叠顺序，在此之外的场景会比较复杂，大家可以自己去实践下，篇幅关系我们不再这里拓展了。
z-index样式属性比较常用于多个元素层级控制的时候，比如弹窗一般需要在最上层，就可以通过设置较大的z-index值来控制。
