CSS 隐藏（display、visibility、overflow 三种隐藏的区别）

最新推荐文章于 2024-08-27 18:15:32 发布

「已注销」

最新推荐文章于 2024-08-27 18:15:32 发布

阅读量796

点赞数 2

分类专栏： # H5C3 文章标签： html css3

本文链接：https://blog.csdn.net/Ares5kong/article/details/115518174

版权

H5C3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

简述：

display：隐藏后, 元素不再占有原来的位置，会影响后面的盒子

visibility：隐藏后, 元素仍占有原来的位置，不会影响后面的盒子

overflow：只是隐藏内部元素溢出的部分

display

从运行结果中可以看出来, 使用 display 属性隐藏后, 元素不再占有原来的位置，所以会影响后面的盒子。

运行：

代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: greenyellow;
    }

    p {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

    div:hover {
      display: none;
    }
  </style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>

visibility

从运行结果中可以看出来, 使用 visibility 属性隐藏后, 元素仍占有原来的位置，不会影响后面的盒子。

运行：

代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: greenyellow;
    }

    p {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

    div:hover {
      visibility: hidden;
    }
  </style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>

overflow

从运行结果中可以看出来, 使用 overflow 属性只是隐藏溢出的部分，而且要写在父元素的样式中。

运行：

代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .parent {
      width: 300px;
      height: 300px;
      background-color: greenyellow;
    }

    .child {
      width: 100px;
      height: 500px;
      background-color: skyblue;
    }

    .parent:hover {
      overflow: hidden;
    }
  </style>
</head>
<body>
<div class="parent">
  <div class="child"></div>
</div>
</body>
</html>