08-CSS高级技巧（元素的显示与隐藏、CSS用户界面样式、vertival-align、溢出文字省略、精灵技术、滑动门）

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

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

  <input  type="text"  style="outline: 0;"/>

2.3 防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

2.4 用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，一般直接去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，resize:none

3. vertical-align垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto;
• 让文字居中对齐，是 text-align: center;
• vertical-align 垂直对齐，只针对于行内元素或者行内块元素。
  
  （以下属性值指的是如图所指四线）

vertical-align : baseline |top |middle |bottom 

3.1 图片、表单和文字对齐

3.2 去除图片底侧空白缝隙

• 原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
• 解决方法： 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

4. 溢出文字省略号显示

4.1 white-space

white-space设置或检索对象内文本显示方式。

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

4.2 text-overflow文字溢出

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

4.3 总结三步曲

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

5. CSS精灵技术（sprite）★

5.1 为什么需要精灵技术

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

5.2 精灵技术讲解

我们需要使用CSS的

• background-image
• background-repeat
• background-position 是关键，用来精确地定位。

6. 滑动门

<a href="#"> <!-- a中设置左侧背景 -->
	<span>内容</span><!-- span中设置右侧背景 -->
</a>

@拓展

margin负值之美

• 负边距+定位：水平垂直居中
• 压住盒子相邻边框 （堆叠顺序：定位的盒子用z-index；如果想让浮动的盒子选中升起在hover里用position:relative）

CSS三角形之美

 div {
 	width: 0; 
    height: 0;
    
    line-height:0；
    font-size: 0;
    
	border-top: 10px solid red;
	border-right: 10px solid green;
	border-bottom: 10px solid blue;
	border-left: 10px solid #000; 
 }

css 边框可以模拟三角效果

1. 宽度高度为0
2. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
3. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;