什么是 block 元素?
在 CSS 中,display: block 是一种常见的显示类型。具有该特性的元素会独占一行,并在其前后自动换行。
常见的块级元素包括 <div>、<p>、<h1>-<h6>、<ul> 等。
block 元素的主要特性
- 独占一行(宽度默认为容器的 100%)
- 可以设置 width、height、padding、margin 等盒模型属性
- 垂直方向上相邻的 margin 会发生重叠(margin collapse)
- 内部可包含其他块级或行内元素
基本示例
以下两个 div 默认就是 block 元素:
<div style="background: lightblue;">块元素 1</div>
<div style="background: lightgreen;">块元素 2</div>
将行内元素转为 block
某些元素如 <span>、<a> 默认是行内(inline)元素,
但可以通过设置 display: block 使其表现如块级元素:
a {
display: block;
width: 200px;
background: #eee;
text-align: center;
}
block 与 inline、inline-block 的区别
- block:独占一行,可设宽高
- inline:不换行,不能设宽高(宽高由内容决定)
- inline-block:不换行,但可设宽高