重庆分公司 重庆分公司

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们
028-86922220

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们

/* 兼容原生不支持hidden属性的浏览器  */  [hidden]{    display: none;  }  Hide and Seek: You can't see me!

.hidden{    display: none;  }  .visible{    display: block;  }  *** START ***      I'm parent!     I'm son! 

*** START ***  *** END ***

    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有两个不同的作用

1.  用于隐藏表格的行和列

2.  用于在不触发布局的情况下隐藏元素

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，只是静静地和其他渲染变化一起等待浏览器定时重绘界面。

“怎么理解CSS中display:none与visibility:hidden”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！