### 控制框（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` 則會產生一個不可見的框 總結： - 如果一個框里，有一個塊級元素，那么這個框里的內容都會被當作塊框來進行格式化，因為只要出現了塊級元素，就會將里面的內容分塊幾塊，每一塊獨占一行（出現行內可以用匿名塊框解決） - 如果一個框里，沒有任何塊級元素，那么這個框里的內容會被當成行內框來格式化，因為里面的內容是按照順序成行的排列