display：none会不会导致其所占空间消失？_把一个页面display :none后div还有高度吗-CSDN博客

本文介绍了CSS中display属性的使用，特别是`display:none`如何让元素占用的空间消失。通过实例展示了块级元素和行内元素的特点，以及它们在文档流中的表现。还探讨了`inline-block`的误差问题和元素嵌套限制，强调了语义化在网页结构中的重要性。

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

display：none；的验证结果是该元素所占空间消失，验证例子为：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        div{
            width:500px;
            height:500px;
        }
        .num1{
            background:#000;
            /*display: none;*/
        }
        .num2{
            background:blue;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="num1"></div>
<div class="num2"></div>
</body>
</html>

效果：

display设置为none后

证明结果：display设置为none时，所占空间消失。
但是发现给第二个块元素设置为display为inline-block时并没有与第一个块元素在一行，所以将第一个块元素的display也设置为inline-block时，两个块元素才处于一行。然后想起之前有看过块元素可以和行内元素处于一行，就试了下div后插一个a标签结果：

<div class="num1"></div>
<a href="###">111</a>
<div class="num2"></div>

效果：

然后去查了下之前行内元素和块元素的概念和相关知识：

行内元素与块元素
行内元素也叫内联元素，块元素有点也叫行元素。
行级元素和块级元素
元素是通过display的属性值来划分的：block块元素 inline行内元素 inline-block行内块元素

块级元素具有以下特点：

1.总是新行上开始，占据一整行；
2.高度，行高以及外边距和内边距都可控制；
3.宽在未设置情况下与浏览器的宽度一样，与内容无关；
4.它可以容纳内联元素和其他块元素。

行内元素的特点：

1.和其他元素都在一行上；
2.内联元素不可以设置宽和高、垂直的margin和padding ！！
3.宽度只与内容有关；
4.行内元素只能容纳文本和其他行内元素。

元素类型独占一行能设置宽高 margin,padding值
块级元素是是四个都可以设置
内联元素否否竖直的不可设置

在查询资料的时候有发现了一个东西就是

p元素内不能嵌套div元素

然后我去做了试验：

<p>1111<div>222</div>333</p>

效果如下：

然后查询相关解释：为什么p元素不能嵌套div元素

p元素有默认样式！最好设置margin：0；padding：0；

然后又想到文档流这个概念：
html文档流：
自窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素。

拓展：
inlne-block有几像素的误差！！！

语义化的好处：
1.去掉或样式丢失的时候能让页面呈现清晰的结构。
2.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
3.便于团队开发和维护。
————————————————

版权声明：本文为CSDN博主「蓝色味道」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liuxilei66/article/details/78432600