display:none的进一步理解

最新推荐文章于 2024-06-05 00:48:32 发布

weixin_46370867

最新推荐文章于 2024-06-05 00:48:32 发布

阅读量1.2k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_46370867/article/details/114797126

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

display:none是让某个元素在文档流中消失，并不只是取消这个元素的样式
所以，在使用display:none的时候一定要小心
实例：

<!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>
      .a {
        width: 100px;
        height: 100px;
        border: 5px solid #000;
      }
      .a:hover {
        display: none;
      }
      .b {
        width: 100px;
        height: 100px;
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <div class="a"></div>
    <div class="b"></div>
  </body>
</html>

运行效果：
在这里插入图片描述
当鼠标悬浮到class属性为a的div上的时候的样式：

发现，class为a的div的样式不仅消失了，class为b的div 也占了 class为a的div 的位置

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_46370867

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
display:none的进一步理解

display:none是让某个元素在文档流中消失，并不只是取消这个元素的样式所以，在使用display:none的时候一定要小心实例：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewp
复制链接

扫一扫