文章目录
前言
本文是视觉格式化模型的第一章节,重点讲述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 定义详解
- 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树分开渲染,故也无法作为容器,嵌套子盒。
*注意:绝大多数置换元素默认是行内元