用CSS实现元素的显示与隐藏（简单介绍display，visibility和overflow）

前言

  将元素的显示和隐藏，他们的主要目的是让一个元素在页面中消失，但是不并非是将该元素删除，虽然在界面中是看不见它的，但实际上它还存在与文档源代码里面。类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！俗称消失了，但也没完全消失。

  在这里要介绍的是如何通过display，visibility和overflow这三种属性实现元素的显示与隐藏。

display属性

display 属性用于设置一个元素应如何显示。后面应用及其广泛，搭配 JS 可以做很多的网页特效
display 隐藏元素后，不再占有原来的位置。

常用属性值

display:block;除了转换为块元素之外，同时还有显示元素的意思

属性值的举例说明

1.none

display:none;主要用于元素的隐藏。

eg：

现在我们给蓝色盒子加上display:none;

如图所示，蓝色盒子被隐藏了，在网页中看不见了。而且红色盒子向上移动占据了蓝色盒子原来的位子。这里也体现了 display隐藏元素后，不再占有原来的位置。

2.block

除了转换为块级元素之外，同时还有显示元素的意思

eg
这里有一个简单的效果，在div盒子里面一块输入Record The Picture的p标签，但是因为带有display:none;无法显示。

现在我们在 div:hover .one {}里面加入display:block;,让他实现鼠标放在盒子上面显示输入Record The Picture的p标签。如图

visibility属性

visibility 属性用于指定一个元素应可见还是隐藏。
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置。

常见属性值

属性值的举例说明

1.visible

visibility:visible;可视,元素是可见的。默认值。

eg:

这里是红色盒子添加了visibility:visible;

2.hidden

eg：

如图所示，当蓝色盒子box添加了visibility:hidden;后，被隐藏掉了。但红色盒子并没有上移占据他的位置，也就是说visibility隐藏元素后，该隐藏元素依然占有原来的位置。

overflow属性

溢出显示隐藏 但是只是对于溢出的部分处理
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

常见属性值

属性值的举例说明

1.visible

visible默认值。内容不会被修剪，会呈现在元素框之外。

eg:

这里内容超出容器。 溢出的文字没有有隐藏，对溢出内容不做处理。

2.hidden

hidden内容会被修剪，并且其余内容是不可见的。且没有滚动条

eg:

但是如果有定位的盒子，请慎用overflow：hidden；因为他会隐藏多余的部分

3.scroll

overflow: scroll;隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。（不管有没有溢出，只要添加scroll就有滚动条）

eg:

4.auto

overflow:auto; 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。（只有溢出的时候才有滚动条）

eg:

总结

1. display 显示隐藏元素 但是不保留位置
   
2. visibility 显示隐藏元素 但是保留原来的位置
   
3. overflow 溢出显示隐藏 但是只是对于溢出的部分处理