CSS | 盒类型 与 display 显示属性

前言

 本文是视觉格式化模型的第一章节，重点讲述CSS 2.1规定的盒类型，及相应display属性。
 本文将不涉及table布局及CSS3中的flex，grid等CSS3。这三类将另开篇，单独讲解。
 文中会提到盒类型对格式化上下文的影响，如果你之前没有接触过格式化上下文，不用紧张，你暂时可以将格式化上下文理解为具有特定排版规则的环境，我会在后续文章中详细讲解。

盒类型

 盒的类型影响其在视觉格式化模型中的排版放置行为。盒类型，宏观上可分为 块(block) 和 行内(inline) 两类。

1. 块级元素与块盒

  我们通常说的 块(block) 实际上细分为三个相互关联，又相互区别的子概念——块级元素（block-level element)，块级盒（block-level box)，块容器盒（block container box）

1.1 定义

• 块级元素，即display属性为block，在文档中被格式化为块（block）的元素。

• 块级盒指参与块格式上下文（block formatting context)的盒。
  每个块级元素都会生成一个主块级盒（principal block-level box），用来包含后代盒及其内容，任何定位方案都与主块级盒有关。
  'list-item’元素（如li）还会生成额外盒，又称标记盒（marker box），额外盒会根据主块级盒进行放置。

• 除置换元素外，一个块级盒也是一个块级容器盒。
  一个块容器盒要么只包含块级盒，要么建立行级格式化上下文（inline formatting context)而只包含行级盒

• 不是所有的块容器盒都是块级盒。非替换的行内块（inline-block）是块级容器，但不是块级盒。

• 作为块级容器的块级盒也叫块盒（block box）

• 在没有争议时，这三个概念可以统一简称为“块”。

1.2 定义详解

1. Q：额外盒/标记盒的特性是什么，实际表现形式如何？
   A：标记盒，就是列表的前置标识所在的盒。它跟随列表项主块级盒的放置而放置，不能被CSS单独修改。
   实际表现形式参见下例：

      div{
   
            display: list-item;
            list-style-type:square;
            list-style-position:inside;
        }

       <div>我是一个list-item，前面有一个额外盒</div>

2. Q：为什么置换元素可以是块级盒，但不是块级容器盒？
A：在 置换元素 一文中，我们提到，CSS渲染模型并不考虑对置换元素内容的渲染，而是依据其标签和属性，决定显示内容。这意味着，CSS渲染模型并不会深入置换元素内部。因此，置换元素并没有充当容器的客观条件。
而从置换元素的html实现上看，img等单标签元素自然无法嵌入子盒。而select，textarea等元素虽是双标签，但其内部由shadowDOM封装，与文档的主DOM树分开渲染，故也无法作为容器，嵌套子盒。

*注意：绝大多数置换元素默认是行内元