2021-05-18

改变层级关系：z-index：正数，负数也可以，值越大，越在上面显示，默认值：auto（等效于0）
1.z-index只能在定位使用（relative absolute fixed)
2.z-index取整数

锚点：
1.a href=“跳转元素对应的id(#idname)”
2.<标签名 id=“idname”>

行内元素直接设置大小的方式：（转换元素类型和脱离文档流）
1.display:block/inline-block;
2.float:left/right;
3.position:absolute/fixed

行内元素水平居中：text-align:center(父元素添加）------前提（行内元素未脱离文档流，即行内元素没有使用float，absolute，fixed）
水平垂直居中：
1.一行文本水平和垂直居中：text-align：center----水平居中
line-height:height
2.行内元素水平和垂直居中：
A：text-align:center（父标签）—水平居中
padding-top:(height(父）-height（子）)/2
B:子标签（行内元素）定位 设置span 标签文字水平居中：text-align：center（子标签span添加）
设置行内元素span垂直居中：position：absolute；
top：50%；
margin-top：height（span）/2

块元素水平垂直居中：
A:margin：（height（父）-height（子））/2 auto
B:定位：
方式一
父标签：相对定位
子标签：绝对定位
position：absolute
top：50%
margin-top：-height（子标签）/2
left:50%;
margin-left:-width(子标签）/2
方式二
父标签：相对定位
子标签：绝对定位
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

display：table-cell水平垂直居中
1.display:table-cell（父元素）
2.text-align:center(文本，行内元素，行内块元素）----水平居中
3.vertical-align:middle----垂直居中

图片下方有间隙：
1.vertical-align:top/middle/bottom(除了基线以外的都可以）
2.display:block(不能写inline,inline-block)
3.float
4.font-size:0(父元素添加）

高度塌陷：
子元素浮动导致父元素没有高

解决塌陷办法：
1.父标签：overflow：hidden
缺点：隐藏溢出内容
2.父元素里面添加空div标签，清除浮动
缺点：代码冗余，不利于代码可读性
3.万能清除法：
父标签:after{
content:"";
display: block;
clear:both;
height:0px;
overflow: hidden；
}

元素隐藏的方法：
1.display:none-----不占空间
2.visibility:hidden-----占空间
3.opacity：0----占空间