整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一说起隐藏HTML页面上的元素，很多人第一反应就是设置元素的css属性display:none;值，这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法，以及它们的区别。
本篇文章中的例子直接放到github地址中，感兴趣的同学可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html
CSS
正如上文说的一样，最简单也最粗暴的方法就是设置元素的display属性为none;
display:none;
设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。
另外一种方法是设置元素的visibility属性为hidden。
visibility: hidden
这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。
如果希望元素隐藏后不会引起页面布局的变化，则推荐使用visibility:hidden;方式。
设置元素透明度opacity属性为0，也可以隐藏页面元素。
opacity:0
在呈现上与visibility:hidden;方式一样，同样会占据页面空间。
对页面布局的影响主要是看是否会引起浏览器的重汇和重排，对应的差异如下图所示。
页面布局差异
display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。
visibility: hidden;的元素不会触发绑定的事件。
opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。
我们可以通过以下的例子来看看。
首先我们定义两个div，分别设置为visibility: hidden;和opacity:0，在两个div上分别绑定一个click事件。
定义div元素
绑定的事件
当我们在两个元素都进行点击时，可以在控制台看到如下输出结果。
结果
从上述结果可以看出和上述结论一致。
display:none;的元素会直接从页面消失，因此定义transition效果完全无效。
visibility:hidden;的元素会在transition设置的时间内消失，但是没有动画效果。
opacity:0;的元素可以和正常元素一样，从页面以动画效果消失。
同样我们可以通过以下这个例子来看看。
首先，我们定义两个div，并设置其transition属性。
div元素
定义transition效果
我们通过将鼠标移至元素上，可以看到两者的差异，从而验证了上述结论的正确性。
本篇文章主要讲解了使用CSS隐藏元素的几种常用方法，并讲解了它们之间的区别，以便大家在特定的场景中进行选择。
2021 年最后一天，疫情还没有完全结束，武汉市政府也取消了跨年活动。今晚，就连地铁都提前到 9 点关闭，大家都在家里跨年。这不，我也在家里跨年。不过我并没有看晚会，而是整理了一篇前端小技巧，算是给自己 2021年一个小小的总结。
用 CSS 隐藏元素有很多种方法，这里介绍 3 种常见的。
特点是【看不见，占空间，摸得着】
特点是【看不见，占空间，摸不着】
特点是【看不见，不占空间，摸不着】
接下来，我们来编写代码验证一下。首先写入三个方块，对中间的橙色方块添加点击事件。代码及页面效果如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {width: 200px;height: 50px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
</style>
</head>
<body>
<div>
<div class='box red'></div>
<div class='box orange' id="btn"></div>
<div class='box yellow'></div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert('触发点击操作 0.0');
}
</script>
</body>
</html>image
image
image
对中间橙色方块添加 opacity: 0 样式，代码及效果如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {width: 200px;height: 50px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
.opacity {opacity: 0}
</style>
</head>
<body>
<div>
<div class='box red'></div>
<div class='box orange opacity' id="btn"></div>
<div class='box yellow'></div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert('触发点击操作 0.0');
}
</script>
</body>
</html>image
image
image
对中间橙色方块添加 visibility: hidden 样式，代码及效果如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {width: 200px;height: 50px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
.visibility {visibility: hidden}
</style>
</head>
<body>
<div>
<div class='box red'></div>
<div class='box orange visibility' id="btn"></div>
<div class='box yellow'></div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert('触发点击操作 0.0');
}
</script>
</body>
</html>image
image
image
对中间橙色方块添加 display: none 样式，代码及效果如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {width: 200px;height: 50px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
.display {display: none}
</style>
</head>
<body>
<div>
<div class='box red'></div>
<div class='box orange display' id="btn"></div>
<div class='box yellow'></div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert('触发点击操作 0.0');
}
</script>
</body>
</html>image
image
本人 2021 年度成就总结：
最后，祝大家元旦快乐～
平常的样式排版中，我们经常遇到将某个模块隐藏，下面我整理了一下隐藏元素的多种方法以及对比（有的占据空间，有的不占据空间。有的可以点击，有的不能点击。）：
( 一 ) display: none;
特点：元素不可见，不占据空间，无法响应点击事件。
.hide{
display: none;
}
( 二 ) opacity: 0; ( IE8以下版本：filter:Alpha(opacity=50) ）
特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。
.hide{
opacity: 0;
filter:Alpha(opacity=0);
}
( 三 ) visibility: hidden;
特点：元素不可见，占据页面空间，无法响应点击事件。
.hide{
visibility: hidden;
}
( 四 ) transform: scale(0);
( 1 ) zoom: 0.1; transform: scale(0);
特点：元素不可见，IE 6 7 9 不占据页面空间，IE8 谷歌 火狐 欧朋 等浏览器占据空间，无法响应点击事件。
.hide{
zoom: 0.1;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
}
( 2 ) position: absolute; zoom: 0.1; transform: scale(0);
特点：元素不可见，不占据页面空间，无法响应点击事件。
.hide{
position: absolute;
zoom: 0.1;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
}
( 五 ) width: 0; height: 0; 配合overflow: hidden;
特点：元素不可见，不占据页面空间，无法响应点击事件。但 padding值 和 margin值 依然存在，需要将内外边距都调整为0。
.hide{
display: inline-block;
width: 0;
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
( 六 ) position: absolute; left: -200%; 或者 top: -200%；等，父级需要相对定位，这种left top值可以根据具体的实际情况去定义
特点：元素不可见，不占据页面空间，无法响应点击事件。
. father{
position: relative;
overflow: hidden;
}
.hide{
position: absolute;
left: -200%;//或top: -200%;
}
( 七 ) clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)
特点：元素不可见，占据页面空间，无法响应点击事件。
.hide{
float: left;
width: 150px;
margin: 20px;
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}
( 八 ) margin: top | right | bottom | left ;父级添加overflow: hidden; (margin的值 一定要小于（子级的宽度加上边距的总和的负数）)
特点：元素不可见，不占据页面空间，无法响应点击事件。
.father{
width: 400px;
height: 400px;
overflow: hidden;
}
.hide{
display: inline-block;
width: 200px;
height: 200px;
margin-left: -200px;
}
以上就是几种隐藏元素的方法，我在以前的面试中，也碰到了面试官提出的一些关于隐藏元素css的对比，查阅了一些资料，做了以下整理：
( 一 ) display: none 和 visibility: hidden 的区别
1. 占据页面空间( display: none 将元素隐藏后，在页面是是不占有空间位置的，而visibility: hidden 将元素隐藏后，还保留着元素大小的空间位置 ) ；
2. display: none 影响了 reflow和repaint(回流与重绘)，而visibility: hidden并没有影响
3. 某个模块添加了display: none; 它下面的任何子级都会被隐藏，而添加了visibility: hidden，子级一旦有添加visibility: visible的css，该子级将不会被隐藏。
( 二 ) display: none 和 opacity: 0的区别
1. 占据页面空间( display: none 将元素隐藏后，在页面是是不占有空间位置的，而opacity: 0 只是改变了元素的透明度将其隐藏，还保留着元素大小的空间位置 ) ；
2. display: none 不会被子类继承，但是子类一样不会显示。 opacity: 0 会被子类继承，但不能像visibility的属性一样，给子类添加opacity:1，并不能将子类显示。
3. css3 transition 属性对display：none 并无效果，但对opacity 则有效果。（附加一句，对visibility: hidden也无效果）
*请认真填写需求信息，我们会在24小时内与您取得联系。
