元素居中问题

布局
1.正常文档流 主要是 一行一行
2.浮动布局 浮动流 主要解决 页面模块 水平排列
3.定位 主要解决重叠

一、固定定位
position：fixed；
1.完全脱离文档流，不占据空间
2.没有设置宽高元素大小会变成内容实际大小来决定，设置width和height就由width和height决定
3.以浏览器的可视窗口作为参考点，一直固定在浏览器可视窗口的某一位置**

二、绝对定位
position：absolute；
1.绝对定位完全脱离文档流，不占据空间
2…没有设置宽高元素大小会变成内容实际大小来决定，设置width和height就由width和height决定
3.如果所有父元素没有定位，就由body的（0,0）作为参考点，如果有定位就以最近的一个有定位的父元素作为参考点

三、相对定位
position：relative；
1.相对定位不会脱离文档流
2.相对定位不会改变元素的本身显示的特性
3.以原本正常文档流的位置作为起始的参考点，不影响其他元素

四、绝对定位和相对定位
1.在给子元素设置绝对定位的时候，需要给父元素设置相对定位，如果给父元素设置绝对定位会导致父元素的脱离文档流，影响父元素的兄弟元素
2.一般情况下都是给子元素设置绝对定位，给父元素设置相对定位（父相子绝）

五、定位层级
1.有定位的元素层级高‘，谁有定位，谁的层级高
2.定位层级跟元素的书写顺序有关，谁后定位，谁的层级高
3.z-indx 改变层级 取值范围：-1-9999 数值越大，层级越高 没有设置数值，默认为0
3.如果有两个定位的数值相同，那么依旧依照谁后定位，谁的层级高
4.只有有定位才会有层级

六、粘性定位
position：sticky；
top：50px；
通过粘性定位让滚动条滚动到某一位置的时候停止
sticky兼容性不行，更好的还是使用进行滚动条的监听

七、display
元素相互转换的方式
’
display：inline； 转换为行内元素特性；
display：block； 转换为块级元素特性；
display：inline-block；把元素转换为行内、块级元素特性；
display：list-item；把元素转换我列表；
display：none；把元素隐藏不显示，不占据空间，脱离文档刘
应用：实现鼠标移入显示
.xx{
display:none;
}
.xx:hover .xx{
display：block(inline/list-item等)；
}

八、元素隐藏显示的多种方式

1.把元素隐藏不显示，不占据文档流，脱离文档流 display：none；
2.设置透明度，其取值在0-1之间，并且不会脱离文档流 opacity：0.5；
3.可见状态，不会脱离文档流## 标题 不可见：visibility：hidden；可见：visibility：visible；