(六) css的一些技巧

1. 元素的显示与隐藏

1.1 display *

display: none;			 隐藏元素
display: block;      显示元素 

注: 隐藏以后, 原位置不再保留

实际开发场景：

配合js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

---

1.2 visibility

visibility：visible; 　   可见

visibility：hidden;　     隐藏

注: 隐藏之后，继续保留原有位置

---

1.3 overflow *

检查或设置当盒子的内容超过其指定高度及宽度时如何管理内容

overflow: 属性值;

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

实际开发场景：

1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子

---

2. 鼠标样式

cursor: pointer;

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

3. 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围, 当点击该元素时会显示

但是我们一般会把轮廓线qudiao

outline: 0;

4. 文本域进制拖拽

resize: none;

5. 文字溢出用省略号显示 *

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

---

6. 精灵图 *

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

css精灵计数其实是将网页中的一些背景图整合到一张大图中 (精灵图) , 然后, 各个网页通常只需要精灵图中不同位置的某个小图, 只需要定位到精灵图中的某个小图即可

• 背景定位基本为负值

background: url() x y;

主要思想就是利用 background-position 将需要的小图的位置摆出来

---