块级内容

在 CSS 中，参与块级布局的内容称为 **块级内容**。

在块级布局中，盒子一个接一个地垂直排列，从包含块的顶部开始。每个盒子的左外边框与包含块的左边缘相接。
块级元素始终从新行开始。在水平书写模式下，例如英语或阿拉伯语，它会占据其父元素（容器）的整个水平空间，以及与其内容高度相等的垂直空间，从而创建一个“块”。

**注意：** 如果包含块的 writing-mode 设置为除默认值以外的值，则块级布局的上述行为会发生变化。

**注意：** HTML（*超文本标记语言*）元素在历史上被归类为“块级”元素或“内联”元素。作为一种表现特征，这现在由 CSS 指定。

示例

在这个例子中，两个段落 (<p>) 元素被放入一个 <div> 中。

html

<div>
  <p>
    This the first paragraph. The background color of these paragraphs have been
    colored to distinguish them from their parent element.
  </p>
  <p>This is the second paragraph.</p>
</div>

段落 (<p>) 元素默认情况下是块级元素。这就是为什么它们在块级布局中显示的原因

p {
  background-color: #8abb55;
}