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;
}
3.父元素为display:none，子孙元素也难逃一劫
.hidden{
display:none;
}
.visible{
display:block;
}
***START***
I'mparent!
***END***
浏览器直接显示为
***START***
***END***
4.无法获取焦点
本来无一盒，何处惹焦点呢^_^即使通过tab键也是没办法的
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)".";
}