CSS —— 隐藏、精灵图

CSS —— 隐藏、精灵图

 

目录

CSS —— 隐藏、精灵图

一、隐藏

1. display 属性

2. visibility

3. overflow 溢出

二、精灵图

1. 概述

2. 精灵图（sprites）的使用

#END

---

 

 

一、隐藏

1. display 属性

1.1 display属性：设置一个元素应该如何显示；

1.2 语法格式：

display : none;
display : block;

① none：隐藏对象；

② block：显示元素，同时将元素转换为块级元素；

 

1.3 特点：display 隐藏元素后，不再占有原来的位置；

 

2. visibility

2.1 visibility：用于设定元素是可见还是隐藏；

2.2 语法格式：

visibility : visible;
visibility : hidden;

① visible：元素可见；

② hidden：元素隐藏；

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            visibility : visible;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            visibility : hidden;
        }

2.3 特点：visibility 隐藏元素后，仍然会占有原来的位置；

 

3. overflow 溢出

3.1 overflow：设置内容溢出的元素；

3.2 语法格式：

overflow : visible|hidden|scroll|auto;

依次为：visible|hidden|scroll|auto；

3.3 属性值：

scroll与auto的区别：scroll 无论是否超出内容都会有滚动条，而 auto 只有超出内容才会有滚动条；

注：如果有定位的盒子，一定要注意 overflow : hidden 的使用，因为它会隐藏多余的部分。

 

 

二、精灵图

1. 概述

1.1 什么是精灵图：将多张小背景图片整合到一个大的背景图；

1.2 精灵技术的目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度；

 

2. 精灵图（sprites）的使用

2.1 针对于小的背景图使用；

2.2 主要借助于背景位置来实现 —— background-position；（将大的精灵图作为背景图片）

2.3 一般情况下移动背景图片的位置，移动的距离x、y一般为负值；

（网页中的坐标：x轴右边走是正值，左边走是负值；y轴向下走是正值，向上走是负值）

        span {
            display: inline-block;
            background: url(abcd.jpg) no-repeat;
        }
        .y {
            width: 109px;
            height: 118px;
            background-position: -366px -548px;
        }
        .b {
            width: 103px;
            height: 118px;
            background-position: -120px 0;
        }

 

    Y
    B

 

 

#END