本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1. 元素显示与隐藏
1.1 display显示
display: none /*隐藏对象*/
display: block /*显示对象*/
特点
隐藏之后，位置不在保留，应用于下拉菜单之类
1.2 visibility可见性
visibility : visible;
visibility : hidden;
特点
隐藏之后，继续保留位置
1.3 overflow溢出
检索设置当前对象内容超过指定宽高后的操作
| 属性值 | 描述 |
|---|---|
| visible | 不剪切也不添加滚动条 |
| hidden | 不显示超出对象尺寸的内容 |
| scroll | 不管是否超出，总是显示滚动条 |
| auto | 超出显示滚动条，否则不显示 |
用于清除浮动，隐藏超出内容
2. CSS用户界面样式
2.1 鼠标样式cursor
| 属性值 | 描述 |
|---|---|
| default | 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
2.2 轮廓线
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。 li
最直接的写法是 ： outline: 0; 或者 outline: none;
2.3 防拖拽文本域
<textarea style="resize: none;"></textarea>
3. 垂直对齐
- 有宽度的块级元素居中对齐，是margin: 0 auto;
- 让文字居中对齐，是 text-align: center;
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
-
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
去除图片空白缝隙
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
解决
-
给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
-
给img 添加 display：block; 转换为块级元素
4. 溢出文字省略号表示
4.1 white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal ；默认处理方式
white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
4.2 text-overflow
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
注意：
一定要首先强制一行内显示，再次和overflow属性 搭配使用
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
5. CSS精灵技术（sprite）
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。精灵技术目的：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
background-image、
background-repeat
background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位。
首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
- 精确测量，每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时， 背景定位基本都是 负值。
6. 滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
主要使用css精灵以及padding撑开盒子来实现
a实现左门，用padding撑开，
span实现右门，背景图右对齐，padding撑开
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
7. CSS三角形
用css边框模拟三角形
- 我们用css 边框可以模拟三角效果
- 宽度高度为0
- 4个边框都要写*， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
- 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
