display: block

什么是 display: block？

在 CSS 中，display: block 是一种常见的显示类型，用于将元素渲染为块级元素。 块级元素会独占一行，默认宽度为父容器的 100%，可以设置宽高、内外边距等。

常见块级元素

HTML 中默认为块级元素的标签包括：<div>、<p>、 <h1> ~ <h6>、<ul>、 <ol>、<li>、<section> 等。

基本用法示例

/* 将行内元素 span 变成块级元素 */
span.block {
  display: block;
}

块级元素的特点

• 独占一行（前后自动换行）
• 可设置 width 和 height
• 可设置 margin 和 padding（包括上下）
• 默认宽度为父容器的 100%

应用场景

使用 display: block 可以实现页面布局中的区块划分、按钮样式重置、 图片居中控制等多种效果，是网页结构搭建的基础之一。