知识点一：元素的显示与隐藏
1、实现方式：
①display
②visibility
③overflow
2、display
①元素的隐藏 display: none;
（1)结论：元素本身还在DOM中，只是隐藏而已
（2)元素是不占位置的
②元素的显示 display: block;
（1)结论：display：block可以让行内元素、行内块元素转化为块状元素
（2)display：block可以让隐藏的元素显示出来
3、visibility
①元素的隐藏 visibility: hidden;
（1)元素本身还在DOM中，只是隐藏而已
（2) 元素是占位置的
②元素的显示 visibility: visible;
4、overflow
① overflow: hidden; 盒子中多余的内容隐藏掉
② overflow: scroll; 产生滚动条 :不管内容有没有溢出都会产生滚动条
③overflow: auto; 溢出会有滚动条，没有溢出不会有滚动条
5、总结
①overflow:hidden 1、容器中多余的内容隐藏掉
2、清除浮动
3、消除嵌套关系的外边距合并所带来的影响
知识点二：高级技巧
1、鼠标样式
(1)cursor: default; 小白
(2)cursor: pointer;小手
(3)cursor: text;文本
(4)cursor: move; 移动
2、轮廓
(1)定义：光标获取焦点时产生的框,是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
(2)去掉轮廓： outline: none;
3、防止拖拽文本域
(1)防止拖拽 resize:none
4、vertical-align
(1)vertical-align: middle; 图片与文字垂直居中
(2) vertical-align: top; 文字相对于图片上侧
(3)vertical-align: bottom; 文字相对于图片下侧
知识点三：溢出的文字隐藏
1、word-break:自动换行
(1)break-all：允许在单词内换行。
(2)keep-all：只能在半角空格或连字符处换行。
(3)注意：主要处理英文单词
2、多余的部分显示省略号
(1)white-space：nowrap 强制在同一行内显示所有文本
(2)overflow:hiidden 多余的内容隐藏掉
(3)text-overflow: ellipsis; 溢出的部分显示省略号
(4)注意：三个属性同时使用才有效果
知识点四：精灵图
1、京东、淘宝等都有使用
2、为什么要用精灵图？
(1) 在网页中引入图片，src的属性值是一个网址，会请求数据，需要时间
3、如何去减轻服务器压力，减少加载图片的时间
①图片的懒加载
②精灵图
4、CSS精灵图定义：
①CSS sprites
②多个小图标放在一张图片上，然后通过背景方位去展示不同的小图标
5、使用
①background-image: url(images/img_navsprites.gif);
② background-position: -46px 0;
6、优点
①有效地减少服务器接受和发送请求的次数
②提高页面的加载速度
知识点五：字体图标
1、为什么要用字体图标
①图片过大，会增加服务器的压力
②通过样式设置图片会失真
2、定义：是一种字体inconfont可以设置大小颜色
3、下载过程
①打开http://www.iconfont.cn/登录
②搜索想要使用的字体图标添加入库
③在库中创建项目
④可以编辑字体图标的大小、形状、颜色
⑤下载至本地
4、使用方法
①Unicode
1)引入iconfont.css
2)查找对应的字体编码
3)使用： <span class="iconfont"></span>
②Font class
1)引入iconfont.css
2)查找对应的字体类名
3) 使用<div class="iconfont icon-fangzi"></div>
③ Symbol
1)引入iconfont.js
2)引入入特定样式
3)查找对应的字体类名
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-suosou"></use>
</svg>
5、优点
①可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
②但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
③本身体积更小，但携带的信息并没有削减。
④几乎支持所有的浏览器
⑤移动端设备必备良药...