CSS中常见隐藏元素的属性

最新推荐文章于 2024-05-15 09:32:44 发布

别薅我假发

最新推荐文章于 2024-05-15 09:32:44 发布

阅读量399

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_45371730/article/details/119750305

版权

visibility：hidden 隐藏元素本身，并且在网页中占位置

display：none 隐藏元素本身，并且在网页中不占位置（常用）

overflow：hidden 隐藏超出盒子的内容部分（超出的内容隐藏但不占位）

案例

<!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>隐藏元素</title>
    <style>
      * {
        /* 去除页面默认的边距 */
        padding: 0;
        margin: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        float: left;
        background-color: orange;
        margin: 50px 50px;
        /* 默认显示，不隐藏 */
        display: block;
      }
      /* 鼠标悬停在box1隐藏box1 */
      .box1:hover {
        display: none;
      }
      .box2 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 50px 50px;
        /* visibility: hidden; */
      }
      .box3 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;

        /* overflow: hidden; */
      }
      .box4 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <p>box1</p>
      <p>display: none;</p>
    </div>
    <div class="box2">
      <p>box2</p>
      <p>
        visibility: hidden; <br />
        box1隐藏了我就去它的位置！
      </p>
    </div>
    <div class="box3">
      <p>box3</p>
      <p>
        overflow: hidden;<br />
        box2隐藏了我不去它的位置！
      </p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
    </div>
    <div class="box4">普通</div>
  </body>
</html>

都不隐藏的效果

将box的隐藏代码解除掉注释，增加隐藏效果（.box1没有隐藏是因为添加了hover属性，只有鼠标悬停在.box1才会隐藏）.box3的超出的内容被隐藏了

鼠标悬停在.box1的效果

别薅我假发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS中常见隐藏元素的属性

visibility：hidden 隐藏元素本身，并且在网页中占位置 display：none 隐藏元素本身，并且在网页中不占位置（常用）overflow：hidden 隐藏超出盒子的内容部分（超出的内容虽隐藏但占位）案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatib.
复制链接

扫一扫