【CSS】隐藏元素总结

2024年3月25日 125次阅读 来源: jack2wang

本文旨在加深对css隐藏元素方法的理解，资料均来源于网络，文章结尾附有参考链接。

一、CSS中隐藏元素的常用方法有以下几种：

1. {display: none; //不占据空间，无法点击}
2. {visibility: hidden; //占据空间，无法点击}
3. {height: 0; overflow: hidden; //不占据空间，无法点击}
4. {opacity:0; filter:alpha(opacity=0); //占据空间，可以点击}

二、display：none和visibility：hidden的区别

    主要有以下三点：

  • 空间占据

  • reflow和repaint

  • 株连性

1. 空间占据

display：none 隐藏的元素不占据任何空间
visibility：hidden 隐藏的元素占据空间

注意 不管用何种方式，HTML里的元素都在打开网页时一并加载，但是表现的时候用 CSS 来控制你是否能看得到。

2. reflow和repaint

    `display:none` 会引起`reflow`和`repaint`
    `visibility:hidden` 不会引发`reflow`，但是会引起`repaint`，引发的`repaint`较小

注关于repaint与reflow会另外总结

3. 株连性

株连性：如果祖先元素遭殃了，其子孙元素也无一例免的都将遭殃。

display：none 如果祖先元素设置了该样式，该元素及其子孙元素都将隐藏，并且没有其它让其子孙元素恢复显示的办法。
visibility：hidden 如果祖先元素设置了该样式，该元素及其子孙元素都将隐藏，但是给其子孙元素设置 visibility：visible样式，仍然可以让该子孙元素恢复显示。

三、visibility失效的妙用

利用visibility的非株连性让父元素隐藏，而子元素显示

场景分析：
要让父标签的圆角、投影、背景等什么的都隐掉，只留里面的文本框。该怎么实现？如果是要display:none，则里面的文本框框也会被一并抹杀掉的，如果是要脚本控制style，需要修改太多的样式。毋庸置疑，这里使用visibility控制是最高效也是最巧妙的方法。

四、height：0和overflow：hidden组合

overflow:溢出隐藏，也就是说盒子以外的元素都会隐藏掉。
但是，这里有例外的情况，先来看一下css2.1对overflow的解释:

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

此属性（overflow）规定，当一个块元素容器的内容溢出其盒子模型的边界时，溢出的内容是否隐藏取决于溢出内容的包含块，如果溢出元素（内容，即块元素容器的子孙元素）的包含块是该块元素容器（即用overflow样式的元素）的祖先元素，则该溢出元素将不隐藏。

包含块：一个绝对定位的元素，其包含块是最近的拥有非static定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是body元素。

参考：
1、您可能不知道的CSS元素隐藏“失效”以其妙用
2、CSS display:none和visibility:hidden的区别

    原文作者：jack2wang
    原文地址: https://segmentfault.com/a/1190000004904515
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞