什么是 display: block?
在 CSS 中,display: block 是一种将元素渲染为“块级元素”的方式。
块级元素会独占一行,默认宽度为父容器的 100%,可以设置宽高、内外边距等。
常见的块级元素包括:<div>、<p>、<h1>-<h6>、<ul> 等。
基本语法
element {
display: block;
}
示例:将行内元素转为块级
默认情况下,<span> 是行内元素,不能设置宽高。使用 display: block 可使其表现如块级元素:
<span style="display: block; width: 200px; height: 50px; background: lightblue;"> 这是一个 span 元素 </span>
block 与其他 display 值的区别
inline:行内元素,不换行,不能设宽高(如<span>)。inline-block:兼具行内与块级特性,可设宽高但不换行。none:元素不显示且不占用空间。
常见用途
- 控制布局流,实现垂直堆叠结构。
- 使链接(
<a>)在导航栏中占据整行,提升点击区域。 - 重置元素默认显示行为以满足设计需求。