CSS - 元素显示与隐藏、界面样式、精灵图

1. 元素的显示与隐藏

CSS中有三个显示和隐藏的单词比较常见，分别是 display、visibility、overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中消失。

1.1 display 显示

display 设置或检索对象是否及如何显示。

• display: none; 隐藏对象。
• display:block; 除了转换为块级元素之外，同时还有显示元素的意思。

特点：隐藏之后，不再保留位置。

1.2 visibility 可见性

设置或检索是否显示对象。

• visible：对象可视
• hidden：对象隐藏

特点：隐藏之后，继续保留原有位置。

1.3 overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

• visible：不剪切内容也不添加滚动条。
• auto：超出自动显示滚动条，不超出不显示滚动条。
• hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉。
• scroll：不管超出内容否，总是显示滚动条。

2. CSS用户界面样式

2.1 鼠标样式 cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor: default 默认箭头 | pointer 小手 | move 移动 | text 文本

2.2 轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline: outline-color || outline-style || outline-width

2.3 防止拖拽文本域 resize

resize: none; 可以防止火狐、谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

<textarea></textarea>

2.4 垂直对齐 vertical-align

vertical-align: baseline | top | middle | bottom
设置或检索对象内容的垂直对齐方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，通常用来控制图片/表单与文字的对齐。

模式	单词
基线对齐(默认的是文字和图片基线对齐)	vertical-align: baseline;
垂直对齐	vertical-align: middle;
顶部对齐	vertical-align:top;

2.5 图片、表单和文字对齐

可以通过vertical-align控制图片和文字的垂直关系，默认的图片会和文字基线对齐。

2.6 去除图片底侧空白缝隙

解决方法：

1. 给 img vertical-align: middle | top 等等，让图片不要和基线对齐。

2. 给 img 添加 display: block; 转换为块级元素就不会存在问题。

3. 溢出的文字隐藏

3.1 white-space

white-space 设置或检索对象内文本显示方式，通常使用于强制一行显示内容。

• normal: 默认处理方式
• nowrap: 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

可以处理中文。

3.2 text-overflow

text-overflow: clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。

• clip：不显示省略标记（…），而是简单的裁切
• ellipsis：当对象内文本溢出时显示省略标记（…）

注意一定要首先强制一行内显示，再和overflow属性搭配使用。

如：

white-space: nowrap; 
 /*1、强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行 */
text-overflow: ellipsis;   /*2、溢出的部分用省略号替代*/
overflow: hidden;   /*3、隐藏溢出部分*/

4. CSS精灵技术（sprite）

4.1 精灵技术产生的背景

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

但一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

4.2 精灵技术本质

CSS精灵是一种处理网页背景图像的方式。

• 将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页。
• 当用户访问该网页时，只需向服务器发送一次请求，网页中的背景图像就可全部展示出来。
• 通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图）。

4.3 精灵技术的使用

想要精确定位到精灵图中的某个小图，就需要使用CSS中的 background-image、background-repeat 和 background-position 属性进行背景定位。其中最关键的是使用 background-position 属性精确地定位。

4.4 制作精灵图

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），我们要做的是把小图拼成一张大图。

1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
2. 精灵图的宽度取决于最宽的那个背景。
3. 可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
4. 在精灵图的最底端，留意一片空隙，方便以后添加其他精灵图。

5. 滑动门

5.1 滑动门出现的背景

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。

它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。

最常见于各种导航栏的滑动门。

5.2 核心技术

利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

总结：

1. a 设置 背景左侧，padding撑开合适宽度。
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的。