什么是 Block 元素?
在 CSS 中,block 元素(块级元素)是指默认占据其父容器整个宽度的元素,并且在其前后自动换行。
常见的 block 元素包括:<div>、<p>、<h1>–<h6>、<ul>、<li> 等。
Block 元素的主要特性
- 独占一行,前后自动换行;
- 可以设置
width、height、padding、margin等盒模型属性; - 默认宽度为父容器的 100%(除非显式设置);
- 垂直方向上的
margin不会与其他 block 元素重叠(但可能发生 margin collapse)。
<div style="background: lightblue; width: 200px; height: 50px;">Block 元素</div>
<div style="background: lightgreen; width: 150px; height: 50px;">另一个 Block</div>
<div style="background: lightgreen; width: 150px; height: 50px;">另一个 Block</div>
Block 与 Inline 的区别
相比之下,inline 元素(如 <span>、<a>)不会换行,
也无法设置宽高(设置无效),只能通过内容撑开尺寸。
如何改变元素的显示类型?
使用 CSS 的 display 属性可控制元素的显示行为:
display: block;—— 转为块级元素;display: inline;—— 转为行内元素;display: inline-block;—— 行内块元素(兼具两者特性)。
实际应用场景
Block 元素广泛用于页面结构搭建,例如:
- 页面分区(header / main / footer);
- 段落文本排版;
- 列表和导航栏容器。