CSS 高级技巧

1. 元素的显示与隐藏

---

1.1 display 显示

隐藏元素：display: none;

显示元素：display: block;（还有转换块元素的意思）

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

---

1.2 visibility 可见性

显示元素：visibility: visible; 　

隐藏元素：visibility: hidden;

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

---

1.3 overflow 溢出

语法：overflow: 属性;

属性值	描述
visible（默认）	显示溢出内容
hidden	隐藏溢出内容
scroll	不管是否超出内容，总是显示滚动条
auto	仅超出内容显示滚动条，不超出不显示

---

1.4 显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	仅隐藏超出的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

---

2. CSS用户界面样式

---

2.1 鼠标状态样式 cursor

鼠标放在区域内的效果

语法：cursor: 属性;

• 默认：default
• 小手：pointer
• 移动：move
• 文本：text
• 禁止：not-allowed
• 隐藏：none

---

2.2 清除文本框外轮廓线

input { outline: none; }

---

2.3 防止文本域拖拽 resize

<textarea  style="resize: none;">文本域</textarea>

---

3. vertical-align 垂直对齐

只作用于行内、行内块元素，通常用来控制图片、表单、文字的对齐

• 以基线对齐：baseline（默认）
• 以顶线对齐：top
• 以中线对齐：middle
• 以底线对齐：bottom

---

3.1 去除图片底侧空白缝隙问题

原因：图片或者表单等行内块元素，默认底线会和父级盒子的基线对齐，产生空白缝隙

方法一：改变垂直对齐 vertical-align: middle | top | bottom

方法二：转换块级元素 display: block;

---

4. 溢出的文字省略号显示

---

4.1 文本一行显示 white-space

• 自动换行：normal（默认）
• 一行显示：nowrap

---

4.2 文字溢出 text-overflow

文本溢出隐藏：clip（默认）

文本溢出省略号表示：ellipsis

---

4.3 总结三步曲

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

---

5. CSS精灵技术（sprite)

将网页中的背景图像整合到一张大图中（精灵图），各个网页元素只需要精灵图中不同位置的某个小图，就要精确定位到背景中

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

优点：当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来

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

• background-image
• background-repeat
• background-position（关键）

制作精灵图：建议纵向摆放，每个图片之间留有适当的空隙

---

6. 滑动门技巧

为自适应元素中文本内容的多少，背景能够自由拉伸滑动

常见于各种导航栏的滑动门 http://weixin.qq.com/

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

总结：

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

---

7. 拓展技巧

---

7.1 margin负值之美

（1）负边距+定位：水平垂直居中

一个绝对定位的盒子， 利用父级盒子的 50%， 然后往回走自己宽度的一半 ，可以实现盒子水平垂直居中

例：left: 50%; margin: -100px;

---

（2）盒子相邻边框合并

重叠的区域隐藏合并

margin-right: -1px;

margin-bottom: -1px;

---

7.2 CSS三角形之美

div {
    width: 0;
    height: 0;
    line-height:0;
    font-size: 0;
    border-style: solid;
    border-width: 50px 40px;
    border-color: red blue purple orange;
}

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

---