CSS隐藏元素

一说到隐藏元素，很多人会想到display:none;，其实除了它还有很多隐藏元素的方法，它们都有各自特点和属性，今天就来介绍以下两种

一：display

在将display之前我们来看看元素的分类
分类一：块级元素 特点：独占一行，对宽高生效，如果不给宽度撑满整行，如果不给高度随着内容的增长而增长。

分类二：行内元素 特点：可以多个标签存在一行，对宽高不生效完全依靠内容去撑起宽高。

分类三：行内块元素 特点： 结合了行内和块级元素的特点，不仅是可以设置宽高而且还可以多个标签存在一行。

在你写代码的时候肯定遇到过这样的情况，你写了一个div盒子然后你想在它的后面再写一个，你会发现，你写的第二个盒子并不会接在后面，而是跟在他的下面，这是因为div是一个会级元素，它会独占一行，那怎么办呢，这时候display就可以体现它的作用了，它会根据你的需要对元素进行强转。
display：inline； 转成行内元素
display：block； 转成 块级元素时
display：inline-block； 转成行内块元素
我们除了可用它来强转，我们还可以用他的display:none;来隐藏元素
实操效果如下：

在我们没给display之前我们看到这样的效果

在我们给display之后：

再给display之后可以发现红色色块消失了，并且绿色色块向上缩进

二：visibility

首先来看一下他有哪些属性值
visibility：visible; 默认可见的

visibility：cllapse;：使用在表格元素上 删除一行和一列的时候不影响表格的整体布局

最后就是他的隐藏属性visibility：hidden;

我们通过代码来看下他的效果是什么样的，同样的在美给visibility之前，三个色块从上往下排列

再给visibility之后效果如下
我们可以发现红色色块不见了，但是绿色色块并没有向上缩进

总结

通过上面的实践我们可以总结出diplay和 visibility 区别。
1再给.display：none;之后，元素不会占有之前的位置 脱离了文档流，所以后面的元素就可以占有它以前的位置。
2.visibility:hidden;占有之前的位置，不脱离文档流导致空间依然存在，虽然他被隐藏了，但是他还在那个位置占着，后面的元素就不可以占有它的位置。

---

---

其实overflow也有隐藏效果，只不过他隐藏的是超出元素本身溢出的部分
首先写了100px*100px的div,然后往里面填充了很多文字，效果如下

可以看到，超出的部分和div的宽同宽，一直往下延伸

给overflow后效果

我们可以看到，overflow:hidden;只是把内容溢出的部分隐藏了，而不是把整个内容，元素给隐藏。