CSS笔记（六）
知识点一：元素的显示与隐藏
1、实现方式：
① display
② visibility
③ overflow
2、display
① 元素的隐藏 display: none;
1) 结论：元素本身还在DOM中，只是隐藏而已
元素是不占位置的
② 元素的显示 display: block;
1) 结论：display：block可以让行内元素、行内块元素转化为块状元素
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、优点
① 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
② 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
③ 本身体积更小，但携带的信息并没有削减。
④ 几乎支持所有的浏览器
⑤ 移动端设备必备良药...
