display:none、visibility:hidden与opacity:0直间到底什么区别（笔试题）

最新推荐文章于 2024-11-01 00:19:18 发布

强壮的糙汉子

最新推荐文章于 2024-11-01 00:19:18 发布

阅读量330

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_60622481/article/details/124249272

版权

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文详细对比了display:none、visibility:hidden和opacity:0在空间占据、继承、事件绑定及过渡动画四方面的不同。display:none不占据空间，影响布局，无法触发事件且不支持过渡动画；visibility:hidden保持空间，子元素可继承并能触发事件，但不支持过渡；opacity:0元素占用空间，子元素可继承，支持过渡动画，但无法通过改变自身opacity显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、空间占据方面

display:none隐藏后不会占据原有空间，会产生回流和重绘

visibility:hidden和opacity:0元素隐藏，但仍然占据着原有空间，它们俩只会引起页面重绘。

<!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>
        .div1 {
            width: 100px;
            height: 100px;
            background:red;
            margin-top: 10px;
            display: none;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 10px;
            visibility: hidden;
        }

        .div3 {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 10px;
            opacity: 0;
        }
    </style>


</head>

<body>
    <div class="div1">
        display:none
    </div>
    <div class="div2">
        visibility:visible
    </div>
    <div class="div3">
        opacity:0
    </div>

</body>

</html>