01-元素水平居中的方式

原理：利用行内块元素的text-align vertical-align
步骤
1. 元素转为行内块元素
2. 在元素后面写一个空的span, span标签不空格 不回车
3.
span {
转为行内块元素
display: inline-block;
让他成为父元素里面最高的盒子，让父元素的基线以他为准
height: 100%;
让父元素的基线去到span的中心位置
vertical-align: middle
}
4. 元素设置vertical-align: middle(让该元素的中心点和父元素的中心点对齐)
5. 给父元素设置text-align: center

02-置换元素

  1. 置换元素 === 行内块<br />    img input textarea select<br />    浏览器会根据元素的标签名和属性决定要渲染的内容，本质上置换元素会在页面中先绘制一       个框，在框中渲染内容<br />    非置换元素<br />    除了置换元素，其他都是非置换元素

03-定位

定位： 元素定位

  1.         目标元素<br />            坐标系<br />            定位流<br />    position: <br />            static 默认 不定位<br />            relative 相对定位<br />            absolute 绝对定位<br />            fixed  固定定位<br />            sticky 粘性定位<br />    坐标系: 只有设置了定位属性（属性不是默认值）的元素才可以添加坐标系<br />    top<br />    left<br />    right<br />    bottom

04-相对定位绝对定位

相对定位
相对于元素自身在浏览器中的位置进行定位
相对定位不脱离文档流，仍然占据空间

绝对定位
position: absolute
相对于有定位属性并且属性不是默认值的父元素
如果父元素没有定位属性，那么该元素会继续向上找，直到找到最近的有定位属性并且属性不是默认值的父辈元素
如果绝对定位的父辈元素都没有定位属性，那么该元素会参考浏览器的左上角进行定位
子绝父相： 子元素绝对定位 父元素相对定位
绝对定位的元素会脱离文档流

05-二级、三级导航

二级：
erji整体定位
yiji的li相对定位
erji 整体消失
鼠标放到yiji 的li ，让erji整体出现

三级：
erji整体定位
yiji的li相对定位
erji 整体消失
鼠标放到yiji 的li ，让erji整体出现