display:none | visibility:hidden 的区别

最新推荐文章于 2024-04-06 23:07:09 发布

原创最新推荐文章于 2024-04-06 23:07:09 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

JQuery 同时被 3 个专栏收录

53 篇文章

订阅专栏

HTML-XML

23 篇文章

订阅专栏

CSS

16 篇文章

订阅专栏

本文介绍了CSS中两种不同的隐藏元素的方法：使用display:none和visibility:hidden。前者不仅隐藏元素，还释放其所占的空间；后者仅使元素不可见，但保留其原有空间。此外，还提到了服务端控件的Visible属性。

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

<.>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index4</title>
</head>
<body>
    <div>
        <!--display:none是隐藏元素，隐藏后它并不会再占用之前所占的区域(也就是说，连它自己的位置都隐藏掉了)-->
        <div style="display:none; width:100px;height:100px">小苹果</div>

        <div style="width:100px;height:100px; background-color:yellow">A</div>

        <!--visibility:hidden是隐藏元素，隐藏后，它还会占用之前所占的区域（也就是说仅仅是隐藏它自己的外观，并不会隐藏自己的位置）-->
        <div style="visibility: hidden; width: 100px; height: 100px">圣女果</div>

        <div style="width:100px;height:100px; background-color:yellow">B</div>
    </div>
</body>
</html>