CSS魔法堂：display:none与visibility:hidden的恩怨情仇

selfimpr 发布于2019-08-30 15:54 / 2364人阅读

摘要：不耽误表单提交数据虽然我们无法看到的元素，但当表单提交时依然会将隐藏的元素的值提交上去。让元素在见面上不可视，但保留元素原来占有的位置。不过由于各浏览器实现效果均有出入，因此一般不会使用这个值。继承父元素的值。

前言

还记得面试时被问起"请说说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;
}

Hide and Seek: You can"t see me!

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

.hidden{
  display: none;
}
.visible{
  display: block;
}

*** START ***

  I"m parent!
   I"m son! 

*** 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: son 0;
}
.son{
  counter-increment: son 1;
}
.son::before{
  content: counter(son) ". ";
}


  son1
  son2
  son3

结果就是：

1. son1
2. son3

8.Transition对display的变化不感冒
详情请参考CSS魔法堂：Transition就这么好玩

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;
}

  I"m Parent.
  
    I"m Son.

结果：

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;
}

  I"m Parent.
  
    I"m Son.

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

5.CSS中的counter不会忽略

6.Transition对visibility的变化有效

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

总结

现在我们对display:none和visibility:hidden应该有更深入的了解了，下次面试时我们的答案会更丰富出彩哦！
尊重原创，转载请注意来自：https://www.cnblogs.com/fsjoh... 肥仔John^_^

引用

https://css-tricks.com/almana...
https://juejin.im/post/5b406f...

云服务器专线服务创造与魔法云鸟便宜的服务器创造与魔法所有服务器的云鸟在哪创造与魔法怎么换服务器 css与html的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117014.html

CSS魔法堂：小结一下Box Model与Positioning Scheme

摘要：魔法堂重新认识和魔法堂你一定误解过的魔法堂就这个样魔法堂说说那个被埋没的志向深入细节后会发现中定位模式之间，和之间存在千丝万缕的关系，必须以俯瞰的角度捋一下。当采用时，属性的实际值会被重置为。由于和则需要通过来引入来提供盒子定位微调的功能。前言对于Box Model和Positioning Scheme中3种定位模式的细节，已经通过以下几篇文章记录了我对其的理解和思考。《CSS...

szysky 2019-08-30 12:57 评论0 收藏0
CSS魔法堂：重拾Border之——不仅仅是圆角

摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...

_Dreams 2019-08-30 13:01 评论0 收藏0
CSS魔法堂：改变单选框颜色就这么吹毛求疵！

摘要：前言是否曾经被业务提出能改改这个单选框的颜色吧让它和主题颜色搭配一下吧，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。设置为的样式行为特征单选框的行为特征，明显就是选中与否，及选中状态的改变事件，因此我们必须保持对外提供事件。前言是否曾经被业务提出能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开inpu...

freecode 2019-08-29 16:52 评论0 收藏0
CSS魔法堂：说说Float那个被埋没的志向

摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。前言定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...

legendmohe 2019-08-30 12:55 评论0 收藏0
WebComponent魔法堂:深究Custom Element 之标准构建

摘要：明确各阶段适合的操作用于初始化元素的状态和设置事件监听，或者创建。事件类型转换通过捕获事件，然后通过发起事件来对事件类型进行转换，从而触发更符合元素特征的事件类型。前言通过《WebComponent魔法堂:深究Custom Element 之面向痛点编程》，我们明白到其实Custom Element并不是什么新东西，我们甚至可以在IE5.5上定义自己的alert元素。但这种简单...

philadelphia 2019-08-21 14:34 评论0 收藏0