CSS视觉格式化模型，你真的了解么？( 二 ) _CSS

<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div><p>前后将形成两个匿名块盒，包含里面的文档。

文章插图

结果:
some inline text
followed by a paragraph
followed by more inline text.
情况二：一个行内盒包含了一个或几个块盒。在这种情况下，包含块盒的行内盒将拆分为两个行内盒放置于块盒前后，然后分别由两个匿名块盒包含。这样块盒就与其前后包含行内元素的匿名块盒形成了兄弟关系。
如果行内盒包含多个块盒，并且这些块盒之间没有夹杂内容，将在这些块盒前后创建匿名块盒。

文章插图

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>box</title><style type="text/css">body{margin:0 auto;width:980px;height:1000px;}.container{display:block;}p{display:inline;background-color:#FF6666;}span.block{display:block;}span.inline{display:inline;}</style></head><body><div class="container"><p>This is anonymous text before the SPAN.<span class="block">This is the content of SPAN.</span>This is anonymous text after the SPAN.</p><span class="inline">inline text;</span></div></body></html>

文章插图

<span class="block">将产生两个匿名块框，如下所示：

文章插图

body默认是display：block，所以body形成一个块级盒，里面包含了<p>和<span>两个行内元素，<p>和<span>形成了两个不可替换内联块，所以body是一个块盒。
2、行内级元素和行内盒（Inline-level elements and inline boxes）行内级元素（inline-level elements）：display为inline，line-block，inline-table
行内级盒（inline-level boxes）:行内级元素生成行内级盒，参与行内格式化上下文（inline formatting context）。
行内盒（inline boxes）：不可替换元素（<div>，<span>），若display为inline，则会产生一个行盒。
原子行级盒（atomic inline-level boxes):行内级盒中除了行盒之外的盒，为原子级行盒，如可替换行内块，inline-block元素，inline-table元素。

文章插图

2.1 匿名行内盒（Anonymous inline boxes)任何被直接包含在一个块容器元素而不是行内元素中的文本，将形成一个匿名行内盒。如下代码：
<p>some <em>emphasized</em> text </p>p元素形成了块盒，em形成了一个行内盒。some和text形成了两个匿名行内盒。空白如果使用white-space去掉，则不会产生行内盒。匿名行内盒没有名字，也不能被CSS选中，所有的CSS属性值为inherit，非继承的CSS属性值为initial 。
如果一个匿名盒的类型可以根据上下文来清晰界定，则匿名行内盒和匿名块盒都可以被简称匿名盒。在格式化表格时，会产生更多类型的匿名盒。
3、其他类型盒行盒（Line boxes）：行盒是由行内格式化上下文产生的盒，用于表示一行。在块盒里面，行盒从块盒的一边排版到块盒的另一边。当有浮动时，行盒从左浮动的最右边排版到右浮动的最左边。
插入盒（run-in boxes）：CSS3中定义的盒，由display：run-in定义，由后续盒的类型决定是块盒还是行盒。可以用来在一个段落中插入标题。
表格内容模型（table content model）：可以创建一个表格包装盒（table wrApper box），也可以创建特殊盒，比如标题盒（caption boxes）。
多列内容模型（multi-column content model）：可以在容器盒与内容之间创建列盒（column boxes）。
实验性的栅格，弹性盒内容模型也创建新的盒类型。
定位方案（Position schemes）CSS引擎在盒生成之后，会采用以下方案指定他们的位置。