CSS隐藏元素的方法
使用CSS隐藏元素的主要方式有diaplay: none;、opacity: 0;、visibility: hidden;、position: absolute; overflow: hidden;、clip-path: polygon(0 0,0 0,0 0);、height: 0; overflow: hidden;。
diaplay
display: none;属性依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效，读屏软件也不会读到元素的内容，这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在，但在DOM中依然可以访问到这个元素，也可以通过DOM来操作它。
<style type="text/css">
.display-hide{
display: none;
}
</style>
<section>
<div id="t1"></div>
</section>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click",e => {
alert("第一次点击会隐藏，此后再也无法点击");
e.srcElement.classList.add("display-hide");
})
</script>
opacity
opacity是用以设置透明度的属性，将opacity设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互例如点击事件，对于其添加过渡属性可以显示动画效果。对于opacity属性，可以利用其透明的视觉效果制作点击劫持攻击。
<style type="text/css">
.opacity-hide{
opacity: 0;
}
</style>
<section>
<div id="t2">opacity</div>
</section>
<script type="text/javascript">
document.getElementById("t2").addEventListener("click",e => {
alert("第一次点击会透明，依旧占据原本位置，点击事件依旧有效，动画过渡效果生效");
e.srcElement.classList.add("opacity-hide");
})
</script>
visibility
当visibility属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与opacity不同的是它不会响应任何用户交互，元素在读屏软件中也会被隐藏，如果对于子元素的visibility被设置为visible而父元素的visibility设置为hidden，子元素依旧可以显示而父元素会被隐藏。
<style type="text/css">
.visibility-hide{
visibility: hidden;
}
</style>
<section>
<div id="t3">
<div>visibility</div>
<div style="visibility: visible; color: #000;">still show</div>
</div>
</section>
<script type="text/javascript">
document.getElementById("t3").addEventListener("click",e => {
alert("第一次点击会隐藏，依旧占据原本位置，点击事件不再生效");
e.srcElement.classList.add("visibility-hide");
})
</script>
position
使用position与overflow属性的意义就是把元素脱离文档流移出视觉区域，超出屏幕显示的部分隐藏掉，使用这两个属性隐藏主要就是通过控制方向top、left、right、bottom达到一定的值，离开当前显示区域并将超出部分裁剪，此外在未隐藏时设定好相关样式，在动态添加class时即可实现过渡动画。
<style type="text/css">
body{
overflow: hidden;
}
.posistion-origin{
position: absolute;
left: 5px;
top: 5px;
}
.position-hide{
left: -150px;
}
</style>
<section style="position: relative;height: 115px;">
<div id="t4" class="posistion-origin" >position</div>
</section>
<script type="text/javascript">
document.getElementById("t4").addEventListener("click",e => {
alert("第一次点击会隐藏，元素不占据原本位置，过渡动画有效");
e.srcElement.classList.add("position-hide");
})
</script>
clip-path
clip-path属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏，直接将元素裁剪之后即可实现隐藏效果，该属性兼容性一般，具体可以查阅https://caniuse.com/#search=clip-path。
<style type="text/css">
.clip-path-hide{
clip-path: polygon(0 0,0 0);
}
</style>
<section>
<div id="t5" >clip-path</div>
</section>
<script type="text/javascript">
document.getElementById("t5").addEventListener("click",e => {
alert("第一次点击会隐藏，元素占据原本位置，点击事件不再生效");
e.srcElement.classList.add("clip-path-hide");
})
</script>
height
类似于position与overflow的组合，使用height: 0;将元素高度设置为0，使用overflow: hidden将超出部分裁剪隐藏，即可实现隐藏效果，如果需要使用这两个属性制呈现过渡动画的话，需要将height给予一个确定的值，不能是auto。
<style type="text/css">
.height-hide{
height: 0 !important;
overflow: hidden;
}
</style>
<section>
<div id="t6" >height</div>
</section>
<script type="text/javascript">
document.getElementById("t6").addEventListener("click",e => {
alert("第一次点击会隐藏，元素不占据原本位置，点击事件不再生效，过渡动画有效");
e.srcElement.classList.add("height-hide");
})
</script>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>隐藏元素</title>
<style type="text/css">
body{
overflow: hidden;
}
section > div:first-child{
width: 100px;
height: 100px;
background-color: blue;
}
section{
border-bottom: 1px solid #eee;
padding: 5px;
Box-sizing: border-Box;
}
div{
color: #fff;
transition: all .3s;
}
.display-hide{
display: none;
}
.opacity-hide{
opacity: 0;
}
.visibility-hide{
visibility: hidden;
}
.posistion-origin{
position: absolute;
left: 5px;
top: 5px;
}
.position-hide{
left: -150px;
}
.clip-path-hide{
clip-path: polygon(0 0,0 0);
}
.height-hide{
height: 0 !important;
overflow: hidden;
}
</style>
</head>
<body>
<section>
<div id="t1">display</div>
</section>
<section>
<div id="t2">opacity</div>
</section>
<section>
<div id="t3">
<div>visibility</div>
<div style="visibility: visible; color: #000;">still show</div>
</div>
</section>
<section style="position: relative;height: 115px;">
<div id="t4" class="posistion-origin" >position</div>
</section>
<section>
<div id="t5" >clip-path</div>
</section>
<section>
<div id="t6" >height</div>
</section>
</body>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click",e => {
alert("第一次点击会隐藏，此后再也无法点击");
e.srcElement.classList.add("display-hide");
})
document.getElementById("t2").addEventListener("click",e => {
alert("第一次点击会透明，依旧占据原本位置，点击事件依旧有效，动画过渡效果生效");
e.srcElement.classList.add("opacity-hide");
})
document.getElementById("t3").addEventListener("click",e => {
alert("第一次点击会隐藏，依旧占据原本位置，点击事件不再生效");
e.srcElement.classList.add("visibility-hide");
})
document.getElementById("t4").addEventListener("click",e => {
alert("第一次点击会隐藏，元素不占据原本位置，过渡动画有效");
e.srcElement.classList.add("position-hide");
})
document.getElementById("t5").addEventListener("click",e => {
alert("第一次点击会隐藏，元素占据原本位置，点击事件不再生效");
e.srcElement.classList.add("clip-path-hide");
})
document.getElementById("t6").addEventListener("click",e => {
alert("第一次点击会隐藏，元素不占据原本位置，点击事件不再生效，过渡动画有效");
e.srcElement.classList.add("height-hide");
})
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.cnblogs.com/jing-tian/p/10969109.html
https://blog.csdn.net/cuo9958/article/details/53559826
https://blog.csdn.net/weixin_41910848/article/details/81875725
