怎么理解CSS中display:none与visibility:hidden

本篇内容介绍了“怎么理解CSS中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

div{ border: solid 2px blue; } .visible{ visibility: visible; } .hidden{ visibility: hidden; } I'm Parent. I'm Son.

div{ border: solid 2px blue; } .visible{ visibility: visible; } .hidden{ visibility: hidden; } .hidden:hover{ visibility: visible; } I'm Parent. I'm Son.

怎么理解CSS中display:none与visibility:hidden

其他资讯