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

今天小编给大家分享一下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;
　　}
　　HideandSeek:Youcan’tseeme!
　　3.父元素为di免费云主机、域名splay:none，子孙元素也难逃一劫
　　.hidden{
　　display:none;
　　}
　　.visible{
　　display:block;
　　}
　　***START***
　　 　　I’mparent!
　　I’mson!

相关推荐: HTML中移动端有什么布局方案

这篇文章给大家分享的是有关HTML中移动端有什么布局方案的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 　　注意：代码运行是file协议，在chrome里不支持引用本地文件，会提示跨域错误，可以用firefox或者Safari打开 …