css实现隐藏是写前端时经常遇到的问题，我根据自己的经验和网络方法，一共总结了五种。 分析一下各自的特征。
1. dispalay:none
这是最简单最容易思考的方法。
. hide {
显示：无；
}
dispaly:none的特点是隐藏所有子元素。 隐藏的元素不会占用任何空间，也不会生成长方体模型。 根据文档的流向，右边的元素向左排列，下面的元素向上排列。 这需要注意在开发时不要破坏页面的布局。
但是，如果打开控制台并选择该元素，则可以看到js仍然可以访问从DOM节点隐藏的元素，因为实际上该DOM仍然存在。
2. visibility:hidden
此方法也隐藏元素。 与display不同的是，visibility :隐藏元素，但保留元素占用的空间。 也就是说，右边的元素不会向左排列，下面的元素不会在网上排列。
注意：如果将父元素设置为：visibility:hidden并将子元素设置为visibility:visible，则子元素及其后代元素都将显示。
此方法的DOM元素也存在，允许从DOM节点访问隐藏的元素。
以下示例：
html
头戴
meta http-equiv=' content-type ' content=' text/html； charset=UTF-8 '
script src=' http://cdn.boot CSS.com/angular.js/1.6.2/angular.min.js '/script
斯泰尔斯
div {
高： 200 px；
width: 200px；
}
. div-green {
背景色： green；visibility: hidden;
}
. div-red {
背景色： red；
}
. visible {
可视：可视；
}
/style
/head
实体
h1正规div/h1
div class='div-green '
div
自动可见性/a
/div
div
自动可见性2/a
/div
/div
div class='div-red'div2/div
/body
/html
将绿色div设置为visibility:hidden，结果隐藏了绿色div :
将visible类添加到绿色div的子元素中。
html
头戴
meta http-equiv=' content-type ' content=' text/html； charset=UTF-8 '
script src=' http://cdn.boot CSS.com/angular.js/1.6.2/angular.min.js '/script
斯泰尔斯
div {
高： 200 px；
width: 200px；
}
. div-green {
背景色： green；
可视：隐藏；
}
. div-red {
背景色： red；
}
. visible {
可视：可视；
}
/style
/head
实体
h1正规div/h1
div class='div-green '
div class='visible '
自动可见性/a
/div
div
自动可见性2/a
/div
/div
div class='div-red'div2/div
/body
/html
输出结果如下。
从上图中可以看到，子元素中设置了visibility:visible子元素。
3. opacity
opacity设定元素的透明度，介于0和1之间的值表示0是完全透明的，而1是不透明的。 opacity:0只是在视觉上被认为隐藏了元素及其子元素，实际上该元素占用了空间。 也可以通过js访问DOM节点。
4. position
你不想看元素吗？ 很简单啊。 把它移到自己看不见的地方就行了。 这是将位置设置为隐藏的方法。 如果在元素的位置上设定absoulute，使其超出画面位置，不是就看不见了吗？
eg:
. hide {
位置： absolute；
top: -9999px；
left: -9999px；
}
5.clip-path
这个方法不太常用，你可以知道：
IE或Edge尚未完全支持clip-path。 在clip-path中使用外部svg文件会降低浏览器支持。 使用clip-path方法的代码如下：
. hide {
clip-path:polygon(0px 0px，0px 0px，0px 0px，0px 0px )；
}
转载于：https://www.cn blogs.com/y cherry/p/7268446.html