在CSS样式规则中，display属性用于控制元素在页面中的显示类型，当给某个元素设置display:block时，该元素会被转换为块级元素，其包含的内容会按照块级元素的渲染规则显示在页面中。这是因为块级元素本身具备独占一行、可设置宽高等特性，浏览器在解析样式后会按照对应规则渲染元素内容。
display属性的基础作用
display是CSS中控制元素盒子类型的核心属性，不同的值会决定元素生成的盒子模型类型，以及元素与其他元素的排列方式。常见的display值包括inline、block、inline-block、none等，其中block是块级盒子的标识。
大部分HTML元素都有默认的display值，比如<div>、<p>、<h1>~<h5>标签默认就是display:block，而<span>、<a>标签默认是display:inline。当我们手动给元素设置display:block时，会覆盖元素原有的默认显示属性。
块级元素的渲染规则
设置为display:block的元素会遵循块级元素的渲染逻辑，这也是内容会显示在页面上的核心原因：
- 块级元素会在页面中垂直排列，每个块级元素都独占一行，其宽度默认会填满父容器的可用宽度
- 块级元素可以正常设置width、height、margin、padding等盒模型属性，内容会在盒子内部正常渲染
- 只要元素本身没有被设置visibility:hidden或者opacity:0等隐藏属性，其内容就会按照渲染规则展示在页面中
代码示例验证
我们可以通过以下代码对比不同display值下元素的表现，理解display:block的作用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>display属性测试</title>
<style>
.inline-box {
display: inline;
background-color: #f0f0f0;
/* inline元素设置宽高无效 */
width: 200px;
height: 100px;
}
.block-box {
display: block;
background-color: #e0e0e0;
width: 200px;
height: 100px;
margin-top: 10px;
}
.hidden-box {
display: block;
visibility: hidden;
background-color: #d0d0d0;
width: 200px;
height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<span class="inline-box">我是inline元素，宽高设置无效，内容正常显示</span>
<span class="inline-box">我和上面的span在同一行</span>
<div class="block-box">我是block元素，独占一行，宽高生效，内容正常显示</div>
<div class="hidden-box">我是block元素但设置了visibility:hidden，内容不会显示</div>
</body>
</html>
上述代码中，.block-box设置为display:block后，会独占一行，宽高生效，内容正常渲染在页面上；而.block-box即使设置了display:block，但添加了visibility:hidden，内容就不会显示。这说明设置display:block只是改变元素的显示类型，只要没有额外的隐藏规则，内容就会按照块级元素的规则渲染出来。
常见误区说明
有些开发者会误以为设置display:block是让元素显示的操作，实际上display:none才是隐藏元素的操作。display:block只是将元素转换为块级显示类型，元素本身的可见性不受影响，因此内容会正常出现在页面中。
另外如果元素之前被设置为display:none，此时再改为display:block，元素会从隐藏状态变为显示状态，这也是内容突然出现在页面上的常见场景，本质是元素从不可见的none盒子变为了可见的block盒子。
display_blockCSS块级元素页面渲染修改时间：2026-06-10 00:45:23