CSS —— 隐藏、精灵图
目录
一、隐藏
1. display 属性
1.1 display属性:设置一个元素应该如何显示;
1.2 语法格式:
display : none;
display : block;
① none:隐藏对象;
② block:显示元素,同时将元素转换为块级元素;
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
display: none;
}
</style>
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;
}
<span class="y">Y</span>
<span class="b">B</span>