1.z-index
z-index 就是 z 轴的顺序，z-index 可以设置字符值，如：auto，多数情况设置整数值，可以为负值。z-index 的最大值是 21,4748,3647 (21 亿多)。跨度尽量 10 以上
(1) 层叠顺序取值
z-index 层叠顺序
直接设置没有单位的整数，可以为负值，值越大层级越高
一、定位
1. position 属性
用于定位，指定的某一个元素在文档当中定位的方式
Top,right,bottom,left四个方向属性决定了元素在四个方向上的距离，可以负值
在开发当中多用于px进行位置的调整，在移动端rem比较多
常用的取值
Relative 相对定位
Absolute 绝对定位
Fixed 固定定位
2.相对定位
相对定位 position: relative 不脱离文档流。
可以使用 top，right，bottom 和 left 做偏移。
元素相对的位置是自己本来的位置，移动不改变页面布局。
相对定位属性不会影响周围的布局，但会出现新的层叠顺序。
当四个方向值发生重合时，以 top 和 left 为优先
3.绝对定位
absolute 绝对定位，元素将脱离文档流，其他元素不为该元素预留空间。
它的移动参照为祖先元素的偏移，来确定元素位置。元素会逐层向上寻找自己的参照元素，当找到的最近一层祖先元素具有 position 属性时，该元素就会以这个祖先元素的原点为参照点。
可使用 top，right，bottom 和 left 做偏移。
当四个方向值发生重合时，以“上 top”和“左 left”为优先。
绝对定位的元素可以设置外边距，且不会与其他边距合并。
应用场景背景图中的文字和按钮，轮播图中的控制符
4.固定定位
fixed 固定定位是元素，决定它的“包含块”是 html，唯一可以限定固定定为元素的就是 html 跟元素
position: fixed;`它到父级始终是 html
直接在窗口的某个位置固定
可使用 top，right，bottom 和 left 做偏移。
(1)固定在右边的导航栏（固定的回到导航栏）
固定定位，元素在父元素中居中
二、 css3 高级选择器
1.属性选择器
属性选择器可以使用`[]`将元素的属性名称放入其中，从而通过查找具有该属性的元素来设置其样式。
元素的属性包括：
元素的属性包括：如`id、class、style、title、src、href`等 自定义属性data `
(1)简单属性选择器
具有某个属性的元素，如 id、class ： [属性名]{样式声明}
特指某个元素具有某个属性，如 p[class]：元素名[属性名]{样式声明}
具备多个属性的元素，如 [id][class] : [属性名1][属性名2]{样式声明}
特指某元素具备多个属性： 元素名[属性名1][属性名2]{样式声明 ）
(2)筛选属性选择器
元素的属性名的值 如 id=mydiv ： [属性名=值]{样式声明 ）
元素的属性名以什么值开头：[属性名^=开头的字段]{样式声明}
元素的属性名以什么值结尾：[属性名$=结尾的字段]{样式声明}
元素的属性名包括某字段的值：[属性名*=包含的字段]{样式声明}
元素的属性名包括某些独立的字段：[属性名~=包含的字段]{样式声明}
2.结构性伪类选择器
- 匹配父元素的第一个孩子 ： 父元素>:first-child {样式声明}
- 匹配父元素的最后一个孩子 ：父元素>:last-child {样式声明}
- 匹配父元素的第 n 个孩子： 父元素>:nth-child(n) {样式声明}
- 匹配内部没有任何内容（包含文本）的标签 ：父元素 >:empty{ 样式声明}
- 匹配父元素的唯一子元素：父元素 >:only-child{样式声明}
- 使用 not()参数为选择器，否定该括号内选择器的其他所有选择器，类似于取反：父元素 >:not(不想要的选择器){样式声明}
【注意】 Div:nth-child(2) 与 div>:nth-child(2) 有区别。第一个是指定第二个子元素是 div，第二个指的是div下的第二个孩子
三、弹性布局
弹性布局是 css3 主推的一个布局，传统布局是基于文档流和盒子模型的，主要以浮动布局，定位布局等。
给父元素加 display：flex；使子元素横向排列，不用每个子元素浮动了
父元素不需要清除浮动了，高度依然被子元素撑开
1.弹性布局的基本概念
(1)容器和项目
使用 flex 布局的元素（父元素），称为"容器"
它的所有“子元素”自动成为容器成员，称为 "项目"
它们各自有控制布局的属性，必须是容器包裹着项目
(2)主轴
主轴就是项目的排列方向，主轴会出现四个方向：
- x 轴：起点在左侧
- x 轴：起点在右侧
- y 轴：起点在顶端
- y 轴：起点在底端
(3)交叉轴
交叉轴就是在主轴的垂直方向，项目可在交叉轴上移动
2.将容器指定为 flex 布局
- 任何一个容器都可以指定为 Flex 布局:
- 行内元素也可以使用 Flex 布局:
- 注意，设为 Flex 布局以后，子元素的 float、clear 等属性将失效。
3.容器的属性
(1)主轴的方向
`flex-direction` 代表主轴的方向，即项目的排列方向
- row 左向右
- row-reverse 右向左
- column 上向下
- column-reverse 下向上
(2)项目换行（自适应）
默认情况下，项目都排在一条线上。`flex-wrap`属性定义如果一条轴线排不下，如何换行的模式。
- nowrap 默认不换行
wrap 换行
wrap-reverse 反向换行
(3)主轴和换行的简写方式
`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`横向排列不换行。
(4)主轴上的对齐方式
`justify-content`属性定义了项目在主轴上的对齐方式。是默认起点对齐、终点对齐还是居中对齐等。
前提是，如果项目会换行,则下行按照下一行的数量对齐，间隔与上一行可能不同。不换行元素会在容器缩小是缩小，不会出现对齐效果。
- flex-start 默认起点对齐
- flex-end 终点对齐
- center 居中对齐，一起居中
- space-between 两端对齐，项目之间的间隔都相等，左右贴边
- space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
(5)交叉轴对齐方式
align-items 属性定义项目在交叉轴上如何对齐，"前提是"前提是项目换行,容器的垂直轴方向是有独立高度或者宽度的。注意：多行项目会有行间距离
flex-start 交叉轴的起点对齐
- flex-end 交叉轴的终点对齐
- center 交叉轴的中点对齐
- baseline 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看出来
- stretch 默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度
(6)多轴线对齐方式
`align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start 与交叉轴的起点对齐。
- flex-end 与交叉轴的终点对齐。
- center 与交叉轴的中点对齐。
- space-between 第一行和最后一行贴开始和结束，其他均分中间位置
- space-around 每行间距两侧或上下间距相等，比边框间距大一倍
- stretch 默认值