Z-index
用于设置了定位元素显示的层级
默认定位后的元素会在普通文档元素之上显示,那么如何做到让定位元素显示在文档的下方呢?设置Z-index的值即可。
-
Z轴概念:水平的X轴和垂直的y轴构成了一个面,而Z轴则就是垂直这个面。
-
Z-index作用:Z-index属性其作用就为设置一个定位元素沿 z 轴的位置。
-
Z-index值效果:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面:
即:Z-index如果为正数,则离用户更近,为负数则表示离用户更远。默认值为auto(有的浏览器中默认值为0),堆叠顺序与父元素相同 -
注意:Z-index 仅能在定位元素上奏效(例如 position:absolute;),z-index的值一般设置为整数。
Flex布局
只有子元素会失效,但子元素的子项不会。
Flex-相关基本概念
基本概念:
如果要定义父元素是一个 flex布局容器。则设置display为flex或inline-flex即可。
如果设置为flex则父元素为块状元素,设置为inline-flex父元素呈现为行内元素。而不管父元素本身是什么类型。
一旦一个元素设置为了flex类型,那么其所有的子元素都会被flex方式影响。可以称他们为flex子项。而父元素可以称为flex容器【flex container】
注意:
设为Flex布局以后,直接子元素的float、clear和vertical-align属性将失效。
主轴和交叉轴
- 一个盒子被设置为flex布局后,它默认会存在两种轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
- 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
- 交叉轴的开始位置叫做cross start,结束位置叫做cross end。
- 子元素默认沿主轴排列(即默认水平排列)。
- 单个子元素占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
Flex布局—设置在父元素上的属性:
Flex-direction主轴的方向 / Flex-wrap flex子项是否换行 / flex-flow flex-direction/flex-wrap的简写 / justify-content flex子项在主轴上的对齐方式/ align-items flex子项在交叉轴上的对齐方式 / align-content 多条主轴在交叉轴上的对齐方式
Flex布局—设置在子元素上的属性:
align-content 多条主轴在交叉轴上的对齐方式 / flex-grow 定义子元素在主轴的放大比例,前提是存在剩下空间用于放大 / flex-shrink 定义了子元素的缩小比例 / flex-basis 定义了在分配多余空间之前,子元素占据的主轴空间 / flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写 / align-self 控制单个元素在交叉轴上的对齐方式