2020年6月26日笔记
CSS
CSS高级技巧
元素的显示与隐藏
目的：
让一个元素在页面中消失，但是不在源码中删除。
场景：
网站广告，点击关闭时会消失，刷新一下页面又会重新出现。
display显示
设置或检索对象是否及如何显示。
/*隐藏对象*/
display: none;
/*除了转化成块级元素外，还有显示元素的意思。*/
display: block;
隐藏后不再保留位置。
visibility 可见性
设置或检索是否显示对象
visibility: visible; 对象可视
visibility: hidden; 对象隐藏
隐藏后继续保留位置
overflow 溢出
检索或设置当对象的内容超过其指定高度或宽度时该如何管理内容。
overflow: 参数;
参数：
visible：不剪切内容也不添加滚动条（默认参数）；
hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉；
scroll：不管是否超出内容，总是显示滚动条；
auto：超出自动显示滚动条，不超出不显示滚动条。
CSS用户界面样式
鼠标样式cursor
cursor: 参数;
参数：
default：默认；
pointer：白色小手；
move：移动四方箭头；
text：文本；
not-allowed：禁止；
轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline: outline-color||outline-style||outline-width
但是我们一般不用，都是直接去掉的。
outline: 0;
outline: none;
防止文本域拖拽 resize
实际开发时，我们的文本域右下角是不可以拖拽的。
vertical-align 垂直对齐
- 让有宽度的块级元素水平居中：
margin: 0 auto; - 让文字居中对齐：
text-align: center;
让行内元素或行内块元素垂直对齐：vertical-align: baseline||top||middle||bottom;
通常用来控制图片/表单与文字的垂直对齐。
图片、表单和文字对齐
默认的图片会和文字基线对齐。
去除图片底侧空白缝隙
原因：
图片或者表单等行内元素底线会默认和父级盒子的基线对齐，导致图片底侧会有一个空白缝隙。
解决方法：
- 使用vertical-align修改垂直对齐。
- 给img添加display: block;转换成块级元素。
溢出的文字用省略号表示
三部曲：
/*强制一行显示*/
white-space: nowrap;
/*当对象内文字溢出，不显示溢出部分*/
overflow: hidden;
/*溢出部分用省略号（...）表示*/
text-overflow: ellipsis;
white-space
设置或检索对象内文本显示方式，通常适用于强制一行显示内容
white-space: normal; 默认处理方式
white-space: nowrap; 强制在同一行内显示所有文本，知道内容结束或遇到br换行
text-overflow 文字溢出
设置或检索是否使用省略号（…）表示对象内文本的溢出
text-overflow: clip; 不显示省略号（...）而是直接切掉；
text-overflow: ellipsis; 当对象内文本溢出显示省略号（...）。
CSS精灵技术（sprite）
当用户访问一个网站时，需要向服务器发送请求，网页上的每一张图片都需要经过一次请求才能加载出来。
当网页中的图片过多时，服务器就会频繁的接受和发送请求，这会大大降低页面的加载速度。
为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprite、CSS雪碧）。
CSS精灵技术详解
CSS精灵其实就是将网页上一些背景图像整合到一张大图上（精灵图）；
在使用的时候各个网页元素通常只需要用到精灵图中的某个位置的小图；
这时我们就需要使用：
- background-image
- background-repeat
- background-position
最关键的是使用position进行精准定位。
精灵技术使用的核心总结
CSS精灵技术主要针对于背景图片，插入的图片img是不需要使用这个技术的。
- 精确测量，每个小图的大小和位置；
- 给盒子指定小图时，背景定位的x值和y值基本都是复制。
制作精灵图
大部分情况下都是美工做精灵图，没做也可以跟她提需求，让她做。
精灵图上放的都是装饰性的小的背景图片，插入图片不能往上放。
每个图片之间留有适当的空隙；
精灵图的最底端，留一片空隙，方便我们以后再添加其他精灵图。
小公司，背景图片很少的情况下，没必要使用精灵技术，维护成本太高。如果背景图片比较多，可以建议使用精灵技术。