CSS基础学习06（高级技巧）

1、元素的显示与隐藏
1.1、display显示（重点！！！用得最多）
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（一般都是写在CSS代码的最前面，进行初始化）
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline:outline-color || outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法：outline :0 或者outline :none

2.3、防止拖拽文本域：resize
实际开发中，我们文本域右下角是不可以拖曳的，会造成布局混乱：
resize：none

3、vertical-align 垂直对齐
有宽度的块级元素居中对齐是margin：0 auto；
让文字居中对齐是 text-align：center

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

vertical-align ：baseline (基线，默认的对齐）|| top（顶线） || middle（中线） || bottom（底线）

3.1 去除图片底侧空白缝隙
原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。
解决方法就是：
（1）给img vertical-align:middle || top ||bottom 等等。让图片不要和基线对齐。（最常用）
（2）将图片转换成块级元素，块级元素就没有vertical-align的基线对齐的问题了；

4、溢出的文字省略号显示
4.1 white-space

white-space 设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容
white-space :normal ；默认处理方式（当文字显示不开的时候，自动换行）
white-space：nowrap ;强制在同一行内显示所有文本，直到文本结束或者遭遇br标签才换行。

4.2 text-overflow 文字溢出
设置或检索是否使用一个省略标记（…)标示对象文本的溢出
text-overflow:clip ;不显示省略标记（…),而是简单的裁剪
text-overflow ：ellipsis ;当对象文本溢出时显示省略标记（…)
ellipsis ：省略号

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

总结：
1、强制在同一行内显示所有文本。
white-space: nowrap;
2、 超出的部分隐藏
overflow: hidden;
3、文字溢出用省略号显示
text-overflow: ellipsis;

5、CSS精灵技术：sprite（重点！！！）
精灵技术的作用：有效的减少服务器接收和发送请求的次数，提高页面的加载速度。

CSS精灵技术主要针对于背景图片，插入的图片img是不需要这个技术的

总结：
1、精确测量图片的大小和位置
2、给盒子指定小背景图片时，背景定位基本都是负值

6、滑动门（用于导航栏）
6.1、为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术

6.2、核心技术
利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字数的导航栏。
经典布局：

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

（1）a 是设置左侧背景（左门）；
（2）span 是设置右侧背景（右门）
（3）因为整个导航栏都是连接，所以a要包含span
（4）因为是滑动门，左右推拉，跟文字内容多少有关系，此时需要用文字撑开盒子，就要用到行内块
（5）一定要注意 span 需要背景图片右对齐

总结：
（1）a 设置背景左侧，padding撑开合适宽度。
（2）span设置背景右侧，padding撑开合适宽度，剩下由文字继续撑开宽度。
（3）之所以a 包含span 就是因为整个导航都是可以点击的
（4）a 和span都要转换成行内块模式，要不然写line-height的时候要出问题
（5）一定不要设置宽度

7、拓展
7.1、margin 负值之美（补充.html上的知识）
伪类选择器还可以用在div p 上面，不光只有a

7.2、CSS写三角
（1）我们用CSS边框可以模拟三角效果；
（2）设置一个边框的宽度和高度都为0；
（3）我们四个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为transparent透明就好了；
（4）为了照顾兼容性，加上font-size:0 和 line-height:0
例：
div {
width : 0;
height: 0;
border-style : solid;
border-width : 10px;
border-color : red transparent transparent transparent ;
font-size: 0;
line-height : 0;
}