导航运用弹性盒子的居中方式，常用的伪类选择器，文本超出省略（不换行），背景图片的组合，兼容写法，脱离文档流，满屏效果，全屏100%居中方式，字体图标的使用。

1. 导航文字除开头尾自动居中：
{
display: flex;
justify-content: space-between;}

2. 常用选择器：img li:nth-child(2)/(2n)[n表示倍数]

3.文本超出省略组合使用
强制不换行white-space:nowrap
超出裁切overflow:hidden
文本超出省略text-overflow:ellipsis

2.1  文字强制不换行：white-space:nowrap 

 

4.谷歌自带点开BUG，可以在HTML末尾处加：<script>;</script>

五个游览器内核：Trident:IE,maxthon,腾讯，世界之窗，360游览器

5.如果图片是凹进去的那就用另一张图去覆盖他，进行组合。
背景图可以一次插入多张图：
bgc:url(../../../) no-repeat right center, url(../../../) no-repeat right ,
url(../../../) no-repeat letf ;
bgc-color:red
先写的在前面，后写的在后面,
(背景颜色必须放后面)

6.兼容写法:cs3
只有他有这种写法：
opacity:0,5 ; filter:alpha(opacity=50)

其他的都是这种格式：
box-shadow: ; -o-box-shadow:
-ms-box-shadow:
-moz-box-shadow:
-webkit-box-shadow:
固定定位永远参照于游览器，绝对定位参照于具有定位的祖先元素，相对定位是参照于自身位置

7.脱离文档流的问题：
绝对定位和固定定位是脱离文档流的，不占位置
相对定位是没有脱离文档流，占自身的位置
8.固定定位显影效果：父子级关系，点击出现
9.visibility:hidden（影藏） hover:visibility:visible（显示） 固定定位显影用它最好，看不见，保留位置 （ transition:0 1s 动画元素在visi里面作为延时元素纯在。）
display:none 不存在，不保留位置，不支持动画。
opacity:0 透明保留位置，支持动画时间
垂直居中的实现：top=0 bottom=0 margin:auto
z-index:-1比较的时候不拿父子级不做比较
10.a标签为行内元素，行内元素不支持放大，缩小等，需要转化为块状元素。
11.铺满全屏：html,body{height:100%}
.xx{width:100%;
height:100%
bgc:颜色}
12.全屏百分比居中：用绝对定位居中的方法，目测居中：
div{top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:absolute;
}

13.
字体图标标签的使用：网站https://www.iconfont.cn/
当i标签权重不够时经常会出现CSS效果不显示问题，需要输入类名
<i class="iconfont icon-yinle">哇哇哇</i>