CSS 中 Display Block 的含义

在 CSS 中，“display”属性定义元素在页面上的显示方式。其中，“display: block”是一个常见且重要的值，表示元素将占据整个水平宽度。

含义：

“display: block”指定一个元素将以以下方式显示：

立即学习“前端免费学习笔记（深入）”；

• 占据整个水平宽度，从左到右延伸
• 在其他块级元素上方或下方开始新的一行
• 具有自定义高度和宽度（除非另有指定）

块级元素的特点：

块级元素具有与块相关的以下特性：

• 水平排列，不换行
• 占据整个可用宽度
• 可以设置高度和宽度
• 可以包含其他块级或内联元素

什么时候使用 Display Block：

“display: block”通常用于以下元素：

• 标题（

  、

  等）

• 段落（

  ）

• 列表（
  、
  ）
• 表格（）
  p 和 span 等容器元素

  示例：

  以下 CSS 样式将元素以块级方式显示：

  element {  display: block;}

  这将使元素占据整个水平宽度并开始新的一行。