CSS隐藏元素的方法
使用 ​CSS​隐藏元素的主要方式有 ​diaplay: none;​、 ​opacity: 0;​、 ​visibility: hidden;​、 ​position: absolute; overflow: hidden;​、 ​clip-path: polygon(0 0, 0 0, 0 0, 0 0);​、 ​height: 0; overflow: hidden;​。
diaplay
​display: none;​属性依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效，读屏软件也不会读到元素的内容，这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在，但在 ​DOM​中依然可以访问到这个元素，也可以通过 ​DOM​来操作它。
opacity
​opacity​是用以设置透明度的属性，将 ​opacity​设置为 ​0​只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互例如点击事件，对于其添加过渡属性可以显示动画效果。对于 ​opacity​属性，可以利用其透明的视觉效果制作点击劫持攻击。
visibility
当 ​visibility​属性值为 ​hidden​的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 ​opacity​不同的是它不会响应任何用户交互，元素在读屏软件中也会被隐藏，如果对于子元素的 ​visibility​被设置为 ​visible​而父元素的 ​visibility​设置为 ​hidden​，子元素依旧可以显示而父元素会被隐藏。
position
使用 ​position​与 ​overflow​属性的意义就是把元素脱离文档流移出视觉区域，超出屏幕显示的部分隐藏掉，使用这两个属性隐藏主要就是通过控制方向 ​top​、 ​left​、 ​right​、 ​bottom​达到一定的值，离开当前显示区域并将超出部分裁剪，此外在未隐藏时设定好相关样式，在动态添加 ​class​时即可实现过渡动画。
clip-path
​clip-path​属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏，直接将元素裁剪之后即可实现隐藏效果，该属性兼容性一般，具体可以查阅 ​https://caniuse.com/#search=clip-path​。
height
类似于 ​position​与 ​overflow​的组合，使用 ​height: 0;​将元素高度设置为 ​0​，使用 ​overflow: hidden​将超出部分裁剪隐藏，即可实现隐藏效果，如果需要使用这两个属性制呈现过渡动画的话，需要将 ​height​给予一个确定的值，不能是 ​auto​。
代码示例
每日一题
Original: https://blog.51cto.com/u_15659138/5339032
Author: WindrunnerMax
Title: CSS隐藏元素的方法
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/517728/
转载文章受原作者版权保护。转载请注明原作者出处！