### 控制框(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` 則會產生一個不可見的框
總結:
- 如果一個框里,有一個塊級元素,那么這個框里的內容都會被當作塊框來進行格式化,因為只要出現了塊級元素,就會將里面的內容分塊幾塊,每一塊獨占一行(出現行內可以用匿名塊框解決)
- 如果一個框里,沒有任何塊級元素,那么這個框里的內容會被當成行內框來格式化,因為里面的內容是按照順序成行的排列
- Web 開發筆記
- 從輸入 URL 到頁面加載完成的過程中都發生了什么事情?
- 從瀏覽器接收url到開啟網絡請求線程
- 開啟網絡線程到發出一個完整的http請求
- 從服務器接收到請求到對應后臺接收到請求
- 后臺和前臺的http交互
- http的緩存
- 解析頁面流程
- HTML解析,構建DOM
- CSS解析,構建CSSOM
- 資源外鏈的下載
- CSS的可視化格式模型
- 包含塊(Containing Block)
- 控制框(Controlling Box)
- BFC(Block Formatting Context)
- IFC(Inline Formatting Context)
- 其它
- JS引擎解析過程
- JS的解釋階段
- JS的預處理階段
- JS的執行階段
- 回收機制
- 參考資料
- JavaScript模塊化編程
- AMD
- requireJS
- CommonJS
- UMD
- ES6模塊
- 參考資料
- 使用 JavaScript 實現一門編程語言
- 如何使用 JavaScript 實現一門編程語言(1) —— 前言
- 如何使用 JavaScript 實現一門編程語言(2) —— 編寫一個解析器
- 如何使用 JavaScript 實現一門編程語言(3) —— Input stream
- 如何使用 JavaScript 實現一門編程語言(4) —— Token stream
- 如何使用 JavaScript 實現一門編程語言(5) —— AST
- 如何使用 JavaScript 實現一門編程語言(6) —— Interpreter
- 完整代碼
- 參考資料
- 前端布局概論
- 參考資料
- Windows 筆記
- 錯誤解決
- win10應用商店無法登錄提示0x80070426解決方法
- 使用技巧
- 設置 Hyper-V 和 VMware 共存
- Powershell
- WSL