CSS高级技巧

一 元素的显示与隐藏

1.1 display显示

display: none 隐藏对象， 隐藏之后，不再保留位置。
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

1.2 visibility 可见性

visibility：visible ; 　对象可视
visibility：hidden; 　 对象隐藏，隐藏之后，继续保留原有位置

1.3 overflow 溢出

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条 ，了解
auto	超出自动显示滚动条，不超出不显示滚动条，了解

二 用户界面样式

2.1 鼠标样式cursor

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.2 轮廓线 outline

去掉边框外围轮廓线
outline: 0; 或者 outline: none;

input {
	outline: 0;
}

2.3 防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽

textarea {
	resize: none;
}

三 常用技巧

3.1 vertical-align 垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto
• 让文字居中对齐，是 text-align: center
• vertical-align 垂直对齐，只针对于行内元素或者行内块元素，通常用来控制图片/表单与文字的对齐。

vertical-align : baseline |top |middle |bottom 

3.2 图片和文字对齐

默认的图片会和文字基线对齐。

模式	参数
基线对齐	vertical-align : baseline
垂直居中	vertical-align : middle
顶部对齐	vertical-align : top
底部对齐	vertical-align : bottom

3.3 去除图片底侧空白缝隙（重要）

解决方法：

• 让图片不要和基线对齐。

img {
	/* 任选其一*/
	vertical-align: middle;
	vertical-align: top;
	vertical-align: bottom;
}

• 给img 添加 display：block; 转换为块级元素就不会存在问题了。

img {
	display: block;
}

3.4 溢出文字用省略号显示

三部曲：

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

四 CSS精灵/雪碧技术（sprite）

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

4.1 什么是精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图

4.2 使用精灵图

用background-position 属性精确地定位

background-position: -100px -200px

注意：

1. 精确测量，每个小背景图片的大小和位置。
2. 给盒子指定小背景图片时， 背景定位基本都是 负值。