CSS中元素隐藏的几种方式

来源：互联网发布：怎么提取软件源码编辑：程序博客网时间：2024/06/11 05:13

说一说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>

第一个盒子虽然隐藏了，但是下面的盒子不会跑到第一个盒子的位置，说明第一个盒子还占据着原来的位置。

0 0