常见CSS五种隐藏元素方式

PetitQ HTML/CSS 2019-3-09 1.85K 0 0

今天创客云分析下 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 的效果。

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