css中display:none与visibility:hidden的区别分析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css中display:none与visibility:hidden的区别分析,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4402字,纯文字阅读大概需要7分钟。
内容图文
![css中display:none与visibility:hidden的区别分析](/upload/InfoBanner/zyjiaocheng/418/ed088897c35d4412a067f71e4a7a6fa8.jpg)
还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibility:hidden保留原来的位置后,面试官就会心一笑呢?其实不止那么简单呢!本文我们将一起深究它俩的恩怨情仇,下次面试时我们可以回答得更出彩!
深入display:none
?我们都清楚当元素设置display:none后,界面上将不会显示该元素,并且该元素不占布局空间,但我们仍然可以通过JavaScript操作该元素。但为什么会这样呢?
?这个涉及到浏览器的渲染原理:浏览器会解析HTML标签生成DOM
Tree,解析CSS生成CSSOM,然后将DOM Tree和CSSOM合成生成Render Tree,元素在Render
Tree中对应0或多个盒子,然后浏览器以盒子模型的信息布局和渲染界面。而设置为display:none的元素则在Render Tree中没有生成对应的盒子模型,因此后续的布局、渲染工作自然没它什么事了,至于DOM操作还是可以的。
?但除了上面的知识点外,还有以下8个点我们需要注意的
1.原生默认display:none的元素
其实浏览器原生元素中有不少自带display:none的元素,如link,script,style,dialog,input[type=hidden]等.
2.HTML5中新增hidden布尔属性,让开发者自定义元素的隐藏性
/* 兼容原生不支持hidden属性的浏览器 */ [hidden]{ display: none; } <span hidden>Hide and Seek: You can't see me!</span>
3.父元素为display:none,子孙元素也难逃一劫
.hidden{ display: none; } .visible{ display: block; } *** START *** <div class="hidden"> I'm parent! <div class="visible"> I'm son! </div> </div> *** END ***
浏览器直接显示为
*** START *** *** END ***
4.无法获取焦点
本来无一盒,何处惹焦点呢^_^即使通过tab键也是没办法的
<!-- 真心不会获得焦点 --> <input type="hidden"> <div tabindex="1" style="display:none">hidden</div>
5.无法响应任何事件,无论是捕获、命中目标和冒泡阶段均不可以
由于display:none的元素根本不会在界面上渲染,就是连1个像素的都不占,因此自然无法通过鼠标点击命中,而元素也无法获取焦点,那么也不能成为键盘事件的命中目标;而父元素的display为none时,子元素的display必定为none,因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上,因此display:none的元素无法响应事件。
6.不耽误form表单提交数据
虽然我们无法看到display:none的元素,但当表单提交时依然会将隐藏的input元素的值提交上去。
<form> <input type="hidden" name="id"> <input type="text" name="gguid" style="display:none"> </form>
7.CSS中的counter会忽略display:none
的元素
.start{ counter-reset: son 0; } .son{ counter-increment: son 1; } .son::before{ content: counter(son) ". "; } <div class="start"> <div class="son">son1</div> <div class="son" style="display:none">son2</div> <div class="son">son3</div> </div>
结果就是:
1. son1 2. son3
8.Transition对display的变化不感冒
9.display变化时将触发reflow
撇开display:none,我们看看display:block表示元素位于BFC中,而display:inline则表示元素位于IFC中,也就是说display的用于就是设置元素所属的布局上下文,若修改display值则表示元素采用的布局方式已发生变化,不触发reflow才奇怪呢!
深入visibility
visibility有两个不同的作用
用于隐藏表格的行和列
用于在不触发布局的情况下隐藏元素
4个有效值
1.visible
?没什么好说的,就是在界面上显示。
2.hidden
?让元素在见面上不可视,但保留元素原来占有的位置。
3.collapse
?用于表格子元素(如tr,tbody,col,colgroup)时效果和display:none一样,用于其他元素上时则效果与visibility:hidden一样。不过由于各浏览器实现效果均有出入,因此一般不会使用这个值。
4.inherit
?继承父元素的visibility值。
对比清楚display:none和visibility:hidden
?上面我们已经对display:none列出8点注意事项,那么我们仅需对照它逐一列出visibility的不就清晰可见了吗?
1.父元素为visibility:hidden,而子元素可以设置为visibility:visible并且生效
div{ border: solid 2px blue; } .visible{ visibility: visible; } .hidden{ visibility: hidden; } <div class="hidden"> I'm Parent. <div class="visible"> I'm Son. </div> </div>
结果:
2.和display:none一样无法获得焦点
3.可在冒泡阶段响应事件
由于设置为visibility:hidden的元素其子元素可以为visibility:visible,因此隐藏的元素有可能位于事件冒泡的路径上因此下面代码中,将鼠标移至.visible时,.hidden会响应hover事件显示。
div{ border: solid 2px blue; } .visible{ visibility: visible; } .hidden{ visibility: hidden; } .hidden:hover{ visibility: visible; } <div class="hidden"> I'm Parent. <div class="visible"> I'm Son. </div> </div>
4.和display:none一样不妨碍form表单的提交
5.CSS中的counter不会忽略
6.Transition对visibility的变化有效
7.visibility变化不会触发reflow
由于从visible设置为hidden时,不会改变元素布局相关的属性,因此不会触发reflow,只是静静地和其他渲染变化一起等待浏览器定时重绘界面。
以上就是css中display:none与visibility:hidden的区别分析的详细内容。
内容总结
以上是互联网集市为您收集整理的css中display:none与visibility:hidden的区别分析全部内容,希望文章能够帮你解决css中display:none与visibility:hidden的区别分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。