常见CSS五种隐藏元素方式

概述今天创客云分析下CSS隐藏元素，通常小伙伴们都会想到的一种方法就是设置display为none，这是也是最为人所熟知并且是最常用的方法。 @H_502_0@下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

@H_502_0@今天创客云分析下 CSS 隐藏元素，通常小伙伴们都会想到的一种方法就是设置 display 为 none，这是也是最为人所熟知并且是最常用的方法。当然我也相信还有不少人想到使用设置 visibility 为 hIDden 来隐藏元素，这种方式也是常用的方法，而且也有很多人知道两者的不同。除了这两种方法，本文总结了四种 CSS 隐藏元素方式，具有一定的参考价值，比较了这几种“隐藏”元素方法的区别和优缺点，具有一定的参考价值，下面跟着小编一起来看下吧！

@H_502_0@opacity:0

@H_502_0@opacity 属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为 0 后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。这种方法和 visibility:hIDden 的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为 0 后，元素只是隐身了，它依旧存在页面中。

@H_502_0@<div >

@H_502_0@opacity:0只是把元素隐藏起来了 ，但是还是占有布局，所以还是对布局有影响

@H_502_0@</div>

@H_502_0@<p>ppskdkad</p>

@H_502_0@//CSS样式

@H_502_0@<style>.div1{opacity: 0;wIDth:200px;height:200px;border:1px solID red;}</style>

@H_502_0@visibility:hIDden

@H_502_0@设置元素的 visibility 为 hIDden 也是一种常用的隐藏元素的方法，和 display:none 的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排，但是还是占有布局。visibility:hIDden 适用于那些元素隐藏后不希望页面布局会发生变化的场景。

@H_502_0@<div >

@H_502_0@这是第二个div visibility:hIDden还是只是把元素隐藏了，但是还是占有布局

@H_502_0@</div>

@H_502_0@<style>.div2{visibility: hIDden;wIDth:200px;height:200px;border:1px solID red;}</style>

@H_502_0@display:none

@H_502_0@将元素设置为 display:none 后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。设置元素的 display 为 none 是最常用的隐藏元素的方法。

@H_502_0@<div >

@H_502_0@这是第三个div display:none不会影响到布局

@H_502_0@</div>

@H_502_0@<style>.div3{display: none;wIDth:200px;height:200px;border:1px solID red;}</style>

@H_502_0@position:absolute

@H_502_0@这个是第四个 div 这种方法估计使用的很少我觉得也不会影响到布局但是到底会不会，一起来可以测试下吧，果然这个也不会影响到布局。

@H_502_0@<div >

@H_502_0@这个是第四个div 也不会影响到布局

@H_502_0@</div>

@H_502_0@<style>.div4{position: absolute;top:-9999px;left:-9999px;wIDth:200px;height:200px;border:1px solID red;}</style>

@H_502_0@设置 height，wIDth 等盒模型属性为 0

@H_502_0@这是我总结的一种比较奇葩的技巧，简单说就是将元素的 margin，border，padding，height 和 wIDth 等影响元素盒模型的属性设置成 0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素，这算是一种奇技淫巧。

@H_502_0@<div >

@H_502_0@这是第五个div不会影响到布局

@H_502_0@</div>

@H_502_0@<style>.div4{margin:0;border:0;padding:0;height:0;wIDth:0;overflow:hidden;}}</style>

@H_502_0@这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如 jquery 的 slIDeUp 动画，它就是设置元素的 overflow:hidden 后，接着通过定时器，不断地设置元素的 height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom 为 0，从而达到 slIDeUp 的效果。

@H_502_0@以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持创客云！

@H_502_0@以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的常见CSS五种隐藏元素方式全部内容，希望文章能够帮你解决常见CSS五种隐藏元素方式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。