css中display:none与visibility:hidden有什么区别

今天小编给大家分享一下CSS中display:none与visibility:hidden有什么区别的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　深入display:none

　　 我们都清楚当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过javascript操作该元素。但为什么会这样呢？

　　 这个涉及到浏览器的渲染原理：浏览器会解析html标签生成DOMTree，解析CSS生成CSSOM，然后将DOMTree和CSSOM合成生成RenderTree，元素在RenderTree中对应0或多个盒子，然后浏览器以盒子模型的信息布局和渲染界面。而设置为display:none的元素则在RenderTree中没有生成对应的盒子模型，因此后续的布局、渲染工作自然没它什么事了，至于DOM操作还是可以的。

　　 但除了上面的知识点外，还有以下8个点我们需要注意的

　　1.原生默认display:none的元素

　　其实浏览器原生元素中有不少自带display:none的元素，如link,script,style,dialog,input[type=hidden]等.

　　2.HTML5中新增hidden布尔属性，让开发者自定义元素的隐藏性

　　[hidden]{

　　display:none;

　　}

　　<spanhidden>HideandSeek:Youcan'tseeme!</span>

　　3.父元素为display:none，子孙元素也难逃一劫

　　.hidden{

　　display:none;

　　}

　　.visible{

　　display:block;

　　}

　　***START***

　　<divclass="hidden">

　　I'mparent!

　　<divclass="visible">I'mson!</div>

　　</div>

　　***END***

　　浏览器直接显示为

　　***START***

　　***END***

　　4.无法获取焦点

　　本来无一盒，何处惹焦点呢^_^即使通过tab键也是没办法的

　　<!--真心不会获得焦点-->

　　<inputtype="hidden">

　　<divtabindex="1"style="display:none">hidden</div>

　　5.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以

　　由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为none时，子元素的display必定为none，因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上，因此display:none的元素无法响应事件。

　　6.不耽误fORM表单提交数据

　　虽然我们无法看到display:none的元素，但当表单提交时依然会将隐藏的input元素的值提交上去。

　　<form>

　　<inputtype="hidden"name="id">

　　<inputtype="text"name="gguid"style="display:none">

　　</form>

　　7.CSS中的counter会忽略display:none的元素

　　.start{

　　counter-reset:son0;

　　}

　　.son{

　　counter-increment:son1;

　　}

　　.son::before{

　　content:counter(son)".";

　　}

　　<divclass="start">

　　<divclass="son">son1</div>

　　<divclass="son"style="display:none">son2</div>

　　<divclass="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

　　&emsp;没什么好说的，就是在界面上显示。

　　2.hidden

　　&emsp;让元素在见面上不可视，但保留元素原来占有的位置。

　　3.collapse

　　&emsp;用于表格子元素(如tr,tbody,col,colgroup)时效果和display:none一样，用于其他元素上时则效果与visibility:hidden一样。不过由于各浏览器实现效果均有出入，因此一般不会使用这个值。

　　4.inherit

　　&emsp;继承父元素的visibility值。

　　对比清楚display:none和visibility:hidden

　　&emsp;上面我们已经对display:none列出8点注意事项，那么我们仅需对照它逐一列出visibility的不就清晰可见了吗？

　　1.父元素为visibility:hidden，而子元素可以设置为visibility:visible并且生效

　　div{

　　border:solid2pxblue;

　　}

　　.visible{

　　visibility:visible;

　　}

　　.hidden{

　　visibility:hidden;

　　}

　　<divclass="hidden">

　　I'mParent.

　　<divclass="visible">

　　I'mSon.

　　</div>

　　</div>

　　结果：

　　2516558939-5bb02e7f4838b_articlex.png

　　2.和display:none一样无法获得焦点

　　3.可在冒泡阶段响应事件

　　由于设置为visibility:hidden的元素其子元素可以为visibility:visible，因此隐藏的元素有可能位于事件冒泡的路径上因此下面代码中，将鼠标移至.visible时，.hidden会响应hover事件显示。

　　div{

　　border:solid2pxblue;

　　}

　　.visible{

　　visibility:visible;

　　}

　　.hidden{

　　visibility:hidden;

　　}

　　.hidden:hover{

　　visibility:visible;

　　}

　　<divclass="hidden">

　　I'mParent.

　　<divclass="visible">

　　I'mSon.

　　</div>

　　</div>

　　4.和display:none一样不妨碍form表单的提交

　　5.CSS中的counter不会忽略

　　6.Transition对visibility的变化有效

　　7.visibility变化不会触发reflow

　　由于从visible设置为hidden时，不会改变元素布局相关的属性，因此不会触发reflow，只是静静地和其他渲染变化一起等待浏览器定时重绘界面。

以上就是“css中display:none与visibility:hidden有什么区别”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网VUE频道。