元素的显示与隐藏

2023-12-27 18:51:33

类似网址广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
**本质：让一个元素在页面中隐藏或显示出来
**
display：显示隐藏
visibility：显示隐藏
overflow：溢出显示隐藏
display
display：block | none ；
display:none; 隐藏对象（用处更多更广泛）
display：block；除了转换为块级元素之外，同时还有显示元素的意思。
display隐藏元素后，不再占有原来位置

visibility
visibility：inherit（默认） | hidden | visible；
visibility：visible：元素可视
visibility：inherit：继承父类的可见性
visibility：hidden：隐藏
visibility隐藏元素后，保留原来位置

overflow溢出
overflow：visible（默认）：显示溢出部分
overflow：auto：溢出时添加滚动条隐藏，不溢出不显示滚动条，较为灵活。
overflow：hidden：不显示溢出部分
overflow：scroll：不管有无溢出都显示滚动条

溢出现象
应用场景
若有定位的盒子，请慎用overflow：hidden 因为它会隐藏多余部分

案例：
土豆网鼠标经过显示遮盖tudou.com

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tudou {
      position: relative;
      width: 444px;
      height: 320px;
      background-color: pink;
      margin: 30px auto;
    }

    .tudou img {
      width: 100%;
      height: 100%;
    }

    .mask {
      display: none;
      /* 隐藏遮盖层 */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .4) url(./images/arr.png) no-repeat center;
    }

    /* 当鼠标经过了 土豆 */
    .tudou:hover .mask {
      display: block;
      /* 显示 */

    }
  </style>
</head>

<body>
  <div class="tudou">
    <img src="./images/tudou.jpg" alt="">
    <div class="mask">

    </div>
  </div>

</body>

</html>

码农公寓

相关文章