CSS之隐藏与显示

display：

display: none 隐藏后不占有原来的位置

display:block 也有显示元素的意思

---

visibility:

hidden 隐藏 ；（隐藏后继续占有原来的位置）

visible 显示；

inherit 继承父对象的可见性。

---

overflow：

visible 默认 显示溢出部分

hidden 隐藏溢出部分

scroll 溢出的部分显示滚动条

auto 有溢出内容时显示滚动条，没有溢出时不显示滚动条

有position定位的盒子要慎用溢出隐藏

---

案例： 模拟视频播放软件，鼠标悬停在图片上时，显示可以点击播放的按钮，离开时恢复正常图片。

  <style>
        .box4 {
            position: relative;
            width: 450px;
            height: 255px;
        }
        .box4 img {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .mask{
            display: none;
            /* 多个有position的盒子，后面写的在最上面（后来居上），mask会在img之上 */
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
        }
        .box5 {
            display: none;
            position: absolute;
            left: 50%;
            margin-left: -25px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }
        .box4:hover .mask {
            display: block;
        }
        .box4:hover .box5 {
            display: block;
        }
  
        .triangle{
            position: absolute;
            top: 50%;
            margin-top: -12px;
            left: 50%;
            margin-left: -4px;
            width: 0;
            height: 0;
            border: 12px solid transparent;/*其他三个边框虽然透明了但也会占空间*/
            border-left-color: white;
         }
  </style>
   <div class="box4"> 
       <img src="images/badao.png" alt=""> 
       <div class="mask"></div> 
     <a href="#"> 
         <div class="box5"><div class="triangle"></div>
     </a>
   </div>

学了CSS3之后，上面例子的三角形可以用伪元素，橙色圆形元素box5可以用CSS3的2D转换用transform translate来设置其水平垂直居中于box4.

用 伪元素选择器 解决上面html中太多div的情况 ↓

伪元素选择器：

可以利用css创建新标签元素，不需要html标签，从而简化html结构

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

注：

• before和after创建一个元素，但属于行内元素（其父元素是双冒号:: 前面那个元素。）
• 新创建的元素在html中找不到，所以称伪元素
• before和after必须有content属性
• 语法 ： element::before{ } element::after{ }
• before在父元素内容前面创建元素，after在父元素内容后面插入元素
• 伪元素选择器（::before 或 ::after ）权重为1，同标签选择器权重。就像一个标签 （div::after权重为2）

上面例子升级版：

<style>
        .box {
            position: relative;
            width: 450px;
            height: 255px;
            margin-top: 10px;
            background-color: pink;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .box::before {
            /* ！！！ 伪元素选择器一定要有 content */
            content: '';
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
        }

        .box::after {
            content: '';
            display: none;
            position: absolute;
            left: 50%;
            margin-left: -25px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }

        .box:hover::before {
            display: block;
        }

        .box:hover::after {
            display: block;
        }

        .box:hover a::before {
            display: block;
        }

        a::before {
            content: '';
            display: none;
            position: absolute;
            z-index: 1;
            top: 50%;
            margin-top: -12px;
            left: 50%;
            margin-left: -4px;
            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-left-color: white;
        }
</style>
<div class="box">
    <a href="#"> <img src="images/badao.png" alt=""></a>
</div>