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

发布时间:2022-03-10 15:11:35 作者:iii
来源:亿速云 阅读:195

今天小编给大家分享一下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属性的浏览器*/

  [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有什么区别”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. Vue打包上线之后部分CSS不生效怎么办
  2. 有哪些CSS基础知识

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css display visibility

上一篇:CSS中页面怎么引用

下一篇:CSS让前端网页布局更好的实用技巧有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》