Skip to main content

块级元素

Docs

块级元素 - HTML | MDN (mozilla.org)

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个"块"。

通常浏览器会在块级元素前后另起一个新行。

  • 格式：默认情况下，块级元素会新起一行。
  • 内容模型：一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更"大型"的结构。

  • 在前面我们会经常提到 div 是块级元素会独占一行，span 是行内级元素会在同一行显示。

    • 到底什么是块级元素，什么是行内级元素呢？

  • HTML 定义元素类型的思路：

    • HTML 元素有很多，比如 h 元素/p 元素/div 元素/span 元素/img 元素/a 元素等等;

    • 当我们把这个元素放到页面上时，这个元素到底占据页面中一行多大的空间呢？

      • 为什么我们这里只说一行呢？因为垂直方向的高度通常是内容决定的;

    • 比如一个 h1 元素的标题，我们必然是希望它独占一行的，其他的内容不应该和标题放在一起;

    • 比如一个 p 元素的段落，必然也应该独占一行，其他的内容不应该和我的段落放在一起;

    • 而类似于 img/span/a 元素，通常是对内容的某一个细节的特殊描述，没有必要独占一行;

  • 所以，为了区分哪些元素需要独占一行，哪些元素不需要独占一行，HTML 将元素区分 (本质是通过 CSS 的) 成了两类：

    • 块级元素 block-level elements: 独占父元素的一行
    • 行内级元素 inline-level elements: 多个行内级元素可以在父元素的同一行中显示

以下是 HTML 中所有的块级元素列表（虽然"块级"在新的 HTML5 元素中没有明确定义）