说一说CSS中关于元素隐藏的几个小例子
1、overflow:hidden将超出部分隐藏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 300px;
height: 150px;
background: pink;
}
</style>
</head>
<body>
<div class="one">
第一最好不相见,如此便可不相恋。
第二最好不相知,如此便可不相思。
第三最好不相伴,如此便可不相欠。
第四最好不相惜,如此便可不相忆。
第五最好不相爱,如此便可不相弃。
第六最好不相对,如此便可不相会。
第七最好不相误,如此便可不相负。
第八最好不相许,如此便可不相续。
第九最好不相依,如此便可不相偎。
第十最好不相遇,如此便可不相聚。
但曾相见便相知,相见何如不见时。
安得与君相诀绝,免教生死作相思。
</div>
</body>
</html>
我们可以看到内容超出了div的区域
给one类中添加overflow:hidden后超出的部分就被隐藏了
.one {
width: 300px;
height: 150px;
background: pink;
overflow: hidden;
}
2 display:none 隐藏元素 不占位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 100px;
height: 100px;
background: red;
display: none;
}
.two {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
第一个盒子被隐藏起来了,而且下面的盒子跑到第一个盒子的位置,所以不占据位置
3 visibility:hidden隐藏元素,占位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 100px;
height: 100px;
background: red;
visibility: hidden;
}
.two {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
第一个盒子虽然隐藏了,但是下面的盒子不会跑到第一个盒子的位置,说明第一个盒子还占据着原来的位置。