其他分享
首页 > 其他分享> > (六) css的一些技巧

(六) 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 将需要的小图的位置摆出来


标签:显示,技巧,精灵,滚动条,超出,一些,overflow,隐藏,css
来源: https://www.cnblogs.com/zhimao/p/15066807.html