### 控制框（Controlling Box） 块级元素和块框以及行内元素和行框的相关概念 **块框:** - 块级元素会生成一个块框（`Block Box`），块框会占据一整行，用来包含子box和生成的内容 - 块框同时也是一个块包含框（`Containing Box`），里面要么只包含块框，要么只包含行内框（不能混杂），如果块框内部有块级元素也有行内元素，那么行内元素会被匿名块框包围 关于**匿名块框**的生成，示例： ```html <DIV> Some text <P>More text </DIV> ``` `div` 生成了一个块框，包含了另一个块框 `p` 以及文本内容 `Some text` ，此时 `Some text` 文本会被强制加到一个匿名的块框里面，被 `div` 生成的块框包含（其实这个就是 `IFC` 中提到的行框，包含这些行内框的这一行匿名块形成的框，行框和行内框不同）。 换句话说 : **如果一个块框在其中包含另外一个块框，那么我们强迫它只能包含块框，因此其它文本内容生成出来的都是匿名块框（而不是匿名行内框）** **行内框：** - 一个行内元素生成一个行内框 - 行内元素能排在一行，允许左右有其它元素 关于 **匿名行内框** 的生成，示例： ```html <P>Some <EM>emphasized</EM> text</P> ``` `P`元素生成一个块框，其中有几个行内框（如`EM`），以及文本`Some `，` text`，此时会专门为这些文本生成匿名行内框 **display属性的影响** `display`的几个属性也可以影响不同框的生成： - `block`，元素生成一个块框 - `inline`，元素产生一个或多个的行内框 - `inline-block`，元素产生一个行内级块框，行内块框的内部会被当作块块来格式化，而此元素本身会被当作行内级框来格式化（这也是为什么会产生`BFC`） - `none`，不生成框，不再格式化结构中，当然了，另一个 `visibility: hidden` 则会产生一个不可见的框 总结： - 如果一个框里，有一个块级元素，那么这个框里的内容都会被当作块框来进行格式化，因为只要出现了块级元素，就会将里面的内容分块几块，每一块独占一行（出现行内可以用匿名块框解决） - 如果一个框里，没有任何块级元素，那么这个框里的内容会被当成行内框来格式化，因为里面的内容是按照顺序成行的排列