今天看到篇文章”用 CSS 隐藏页面元素的5种方法“，现加上自己的一点见解及常见应用归纳如下：

Display

说明

将display设置为none，可以实现元素隐藏，并且不会生成盒模型。使用这个属性，被隐藏的元素不会占用任何空间。一旦给元素设置display:none，任何对该元素的交互操作都不会生效。此外，读屏软件业不会读到该元素的内容。这种实现方式就好像元素不存在一样。不过我们还是可以使用DOM访问到这个元素并像操作其他元素一样操作它。

对于子孙元素，如果父元素设置display: none，子孙元素会全部隐藏。但使用该元素有个不好的就是会造成reflow，影响layout。

应用场景

手风琴、级联导航、状态隐藏等**

Visibility

说明

使用visibility:hidden，可以实现元素隐藏，但是该元素仍会占用布局空间，但不会响应用户交互，此外该元素在读屏软件中也会隐藏。
这个属性也可以实现动画效果，只要它的初始状态和结束状态不一样。这个确保了visibility不同状态间的过渡是平滑的而不是突然的。
对于子孙元素，它的表单和Display不同，如果给父元素设置visibility:hidden，给某个子元素设置visibility:visible，那么这个子元素仍然可见。

应用场景

input[“autoclear”](隐藏时占用空间而又不影响布局)、清除浮动

Position

说明

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，使用position:absolute可以实现我们的需求。在这种情况下，你只需考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。比如我们常用的CSS：
.hide {
position: absolute;
left: -999em;
top: -999em;
}
这种方式的主要原理就是设置改元素的top/left成足够大的负数，使它在屏幕上不可见。使用该技术，读屏软件可以读取元素内容。
你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。这个方法在创建自定义复选框和单选按钮时经常被使用。

应用场景

模拟input[checkbox]/input[radio]/input[file]

Opacity

说明

opacity:0 通过给元素设置透明度来实现元素隐藏，它不是为改吧元素的边界框而设计的。这意味着opacity：0只能从视觉上隐藏元素。而元素本身仍占用布局空间。同时可以响应用户交互，读屏软件可以读取元数及其内容。
使用opacity属性可以用来实现fadeIn/fadeOut动画，任何 opacity 属性值小于 1 的元素也会创建一个新的堆叠上下文（stacking context）。

应用场景

fade动画、改变z-index层叠顺序

Clip-path

说明

隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做 clip-path。Nitish Kumar 最近在 SitePoint 发表了“介绍 clicp-path 属性”这篇文章，通过阅读它可以了解这个属性的更多高级用法。

记住，clip-path 属性还没有在IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要更低。使用 clip-path 属性来隐藏元素的代码看起来如下：
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

被隐藏元素中的文字仍然能够通过读屏软件读取，许多 WordPress 站点使用 clip-path 或者之前的 clip 来实现专门为读屏软件提供的文字。
虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。剪裁区大小为零，这意味着用户将不能与隐藏的元素直接交互。此外，这个属性能够使用各种过渡动画来实现不同的效果。

应用场景

实现不同形状的shape、常见隐藏动画

混合使用场景

说明

隐藏input[file]元素

1
2
3
4
5
6
7
8
.input-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;  
}

注意事项

给input[type=file]设置display: none or visibility: hidden将不会工作，因为表单提交时input的值不会被发送到服务端。同时，你可能会有疑问，这里为什么不把宽高设置为0而为0.1px。设置为0在一些浏览器tab页可能不会被解析。同时设置position：absolute属性来使其脱离标准流，不会影响其他元素的布局。

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。