摘要：本文旨在加深对隐藏元素方法的理解，资料均来源于网络，文章结尾附有参考链接。如果祖先元素设置了该样式，该元素及其子孙元素都将隐藏，并且没有其它让其子孙元素恢复显示的办法。四和组合溢出隐藏，也就是说盒子以外的元素都会隐藏掉。
本文旨在加深对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的非株连性让父元素隐藏，而子元素显示
场景分析：
要让父标签的圆角、投影、背景等什么的都隐掉，只留里面的文本框。该怎么实现？如果是要display:none，则里面的文本框框也会被一并抹杀掉的，如果是要脚本控制style，需要修改太多的样式。毋庸置疑，这里使用visibility控制是最高效也是最巧妙的方法。
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的区别
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115178.html
摘要：应用场景用户上传头像，实时显示并裁减实现方式模块外部容器设置，剪裁区域里面放一个加载效果，设置。图片尺寸获取成功后，再正常初始化，然后让外部容器属性重置为。这样体验就会好很多，用户只会看到加载中剪裁界面，而不是占位界面加载中最终操作界面。 一、Display 几种隐藏方式 1、希望元素不可见、不占据空间、辅助设备无法访问、不渲染 使用标签：
摘要：使用这种方法来隐藏元素，是否可以触发事件要根据具体的情况来分析。其他的方式只作了解即可，并不推荐使用它们来隐藏元素，它们的真正用途应该不在隐藏元素，而是通过了解这些方法的特点，挖掘出其真正的使用场景 几种方法的简单介绍 display:none 最常用的隐藏元素的方法 .hidden{ display:none } 将元素设置为display:none后，元素在页面上将彻底...
摘要：目前在前端开发所占的比重越来越高，在我们学习和开发的过程中都会去使用。下面把程序员雷雪松对的知识点总结和归纳分享给大家。过滤对同胞元素的搜索。将匹配元素集合缩减为集合中的最后一个元素。返回指定元素相对于其他指定元素的位置。 jQuery目前在Web前端开发所占的比重越来越高，在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原...
摘要：也就是说，较宽的外边距决定两个元素最终离多远。盒模型结论二没有设定属性的元素始终会扩展到填满其父元素的宽度为止。布局的基本概念多栏布局有三种基本的实现方案固定宽度流动弹性。 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的，比如： Hello Everyone! 行内样式会覆盖嵌入样式和链接样式。 嵌入样式 嵌入的css样式是放在HTML文档...
摘要：使用解除坍塌触发可以使用解除坍塌，坍塌是不分父的高度是否固定的。解除坍塌添加外边距效果浮动的不会坍塌。它还额外肩负了解除坍塌的重任。 overflow:hidden 的主要功能有三个： 隐藏溢出 清除浮动 解除坍塌 下面用例子来加深理解： 初始html内容： Document 初始css样式： .container{ ...
阅读 1608·2021-09-26 09:55
阅读 1345·2021-09-23 11:22
阅读 2673·2021-09-06 15:02
阅读 2577·2021-09-01 11:43
阅读 3888·2021-08-27 13:10
阅读 3640·2021-08-12 13:24
阅读 2034·2019-08-30 12:56
阅读 2967·2019-08-30 11:22
