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

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

成都创新互联-专业网站定制、快速模板网站建设、高性价比宁强网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式宁强网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖宁强地区。费用合理售后完善,十年实体公司更值得信赖。

深入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属性的浏览器*/

[hidden]{

display:none;

}

HideandSeek:Youcan'tseeme!

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

.hidden{

display:none;

}

.visible{

display:block;

}

***START***

I'mparent!

I'mson!

***END***

浏览器直接显示为

***START***

***END***

4.无法获取焦点

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

hidden

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

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

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

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

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

.start{

counter-reset:son0;

}

.son{

counter-increment:son1;

}

.son::before{

content:counter(son)".";

}

son1

son2

son3

结果就是:

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:solid2pxblue;

}

.visible{

visibility:visible;

}

.hidden{

visibility:hidden;

}

I'mParent.

I'mSon.

结果:

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;

}

I'mParent.

I'mSon.

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有什么区别
本文链接:http://azwzsj.com/article/iphhdj.html

其他资讯