今天微码盒分析下 CSS 隐藏元素，通常小伙伴们都会想到的一种方法就是设置 display:none，这是也是最为人所熟知并且是最常用的方法。
当然我也相信还有不少人想到使用设置 visibility:hidden 来隐藏元素，这种方式也是常用的方法，而且也有很多人知道两者的不同。
除了这两种方法，本文总结了四种 css 隐藏元素方式，具有一定的参考价值，比较了这几种“隐藏”元素方法的区别和优缺点，具有一定的参考价值，下面跟着小编一起来看下吧！
opacity:0
opacity 属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为 0 后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。这种方法和 visibility:hidden 的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为 0 后，元素只是隐身了，它依旧存在页面中。
- <div class="div1">
- opacity:0只是把元素隐藏起来了 ，但是还是占有布局，所以还是对布局有影响
- </div>
- <p>ppskdkad</p>
- //CSS样式
- <style>.div1{opacity: 0;width:200px;height:200px;border:1px solid red;}</style>
visibility:hidden
设置元素的 visibility 为 hidden 也是一种常用的隐藏元素的方法，和 display:none 的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排，但是还是占有布局。visibility:hidden 适用于那些元素隐藏后不希望页面布局会发生变化的场景。
- <div class="div2">
- 这是第二个div visibility:hidden还是只是把元素隐藏了，但是还是占有布局
- </div>
- <style>.div2{visibility: hidden;width:200px;height:200px;border:1px solid red;}</style>
display:none
将元素设置为 display:none 后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。设置元素的 display 为 none 是最常用的隐藏元素的方法。
- <div class="div3">
- 这是第三个DIV display:none不会影响到布局
- </div>
- <style>.div3{display: none;width:200px;height:200px;border:1px solid red;}</style>
position:absolute
这个是第四个 div 这种方法估计使用的很少我觉得也不会影响到布局但是到底会不会，一起来可以测试下吧，果然这个也不会影响到布局。
- <div class="div4">
- 这个是第四个div 也不会影响到布局
- </div>
- <style>.div4{position: absolute;top:-9999px;left:-9999px;width:200px;height:200px;border:1px solid red;}</style>
设置 height，width 等盒模型属性为 0
这是我总结的一种比较奇葩的技巧，简单说就是将元素的 margin，border，padding，height 和 width 等影响元素盒模型的属性设置成 0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素，这算是一种奇技淫巧。
- <div class="div5">
- 这是第五个DIV不会影响到布局
- </div>
- <style>.div4{margin:0;border:0;padding:0;height:0;width:0;overflow:hidden;}}</style>
这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如 jquery 的 slideUp 动画，它就是设置元素的 overflow:hidden 后，接着通过定时器，不断地设置元素的 height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom 为 0，从而达到 slideUp 的效果。
