14.元素的显示与隐藏

显示与隐藏多用于这种广告

 你点这个叉，这个广告就会消失(隐藏)，当我们刷新后，这个广告就又回来了

显示与隐藏中有三个属性，分别是display,visibility与overflow

目录

1  display

1.1  隐藏元素 display:none

2  visibility

2.1  hidden

2.2  visible

2.3  inherit

2.4  collapse

2.4.1  非表格元素

2.4.2  表格元素

3  overflow

3.1  hidden

3.2  auto

3.3  scroll

4  视频网站小例子

---

1  display

之前我们改变元素种类的时候使用过，我们可以使用display让元素变为行内元素，块元素或行内块元素，可以跟的参数有很多，我这里说几个常用的

• block 转变为块元素
• inline 转变为行内元素
• inline-block 转变为行内块元素

上面这三个除了可以转换元素格式，还可以当作显示元素来用(与我们下面介绍的display:none相反)

这三个不再举例了，我们说一下以前没用过的

1.1  隐藏元素 display:none

我们现在搞两个盒子

现在加入display:none

第一个盒子没了，且第一个盒子的位置不会被保留下来

第一个盒子只是被隐藏起来，但并为被删除，我们依然可以通过调试工具找到它

2  visibility

它可以跟四个值

• inherit 继承父对象的可见性，默认值
• visible 可视
• hidden 全部隐藏，与display:none的区别是: hidden 会保留被隐藏元素的位置
• collapse 对于表格元素与display:none功能相同(不会保留位置)，对于非表格元素与visibility:hidden功能相同(会保留位置)

我们先搞两个父子关系的盒子

2.1  hidden

之后我们把父盒子隐藏起来

发现都没了

2.2  visible

我们现在让子盒子可视

发现子盒子可视了

2.3  inherit

默认就是继承，所以一开始子盒子没有了，现在我们再设置一下

2.4  collapse

2.4.1  非表格元素

我们先对非表格元素使用

发现与hidden效果一样，都被隐藏了

2.4.2  表格元素

首先我们写一个表格，然后给上框子

在这里我们就发现了hidden是会保留被隐藏元素的位置的

现在我们对第一行使用hidden

发现保留了第一行的位置

现在我们再使用collapse

发现没用保留第一行的位置

3  overflow

overflow只对元素溢出的部分进行操作，我们先看什么是溢出部分

我们有一个div，里面有一些文字

显示出来是这样的

不在我们青色范围内的，都是溢出的部分，不仅仅是文字，图像这种也是算是溢出的部分

overflow有四个取值

• visible 可视，大多数元素的默认值
• auto 当溢出时显示滚动条，这个是body与textarea的默认值
• hidden 隐藏
• scroll 总是显示滚动条

3.1  hidden

我们先对溢出的部分进行隐藏

它的效果是这样的

我们发现溢出的部分全都被隐藏了

3.2  auto

我们发现盒子右侧出现了滚动条，我们可以滚动查看全部内容

我们现在把文字都注释掉

发现滚动条消失了

3.3  scroll

发现当我们没有内容溢出时，滚动条依然存在

4  视频网站小例子

当鼠标没停在上面是这样的

当鼠标停在上面时，是这样的

我们的html这样写

css这样写

最后的hover可以写成 .black_cover:cover，上面我给出了另一种写法，相当于是用了一个后代选择器，这样写black_cover必须是video_box的子元素，这个样式才能生效

为了减少html的元素个数，我们可以使用伪元素选择器来写，那么它的html就是这样的

css是这样的

这里使用before与after都可以，发现同样可以达到效果