(六) 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 | 超出自动显示滚动条，不超出不显示滚动条 |
实际开发场景：
- 清除浮动
- 隐藏超出内容，隐藏掉, 不允许内容超过父盒子
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 将需要的小图的位置摆出来
标签：显示,技巧,精灵,滚动条,超出,一些,overflow,隐藏,css 来源： https://www.cnblogs.com/zhimao/p/15066807.html