### IFC(Inline Formatting Context)
IFC即行內框產生的格式上下文
**IFC規則**
```
在行內格式化上下文中
框一個接一個地水平排列,起點是包含塊的頂部。
水平方向上的 margin,border 和 padding 在框之間得到保留
框在垂直方向上可以以不同的方式對齊:它們的頂部或底部對齊,或根據其中文字的基線對齊
```
**行框**
**包含那些框的長方形區域,會形成一行,叫做行框**
行框的寬度由它的包含塊和其中的浮動元素決定,高度的確定由行高度計算規則決定
行框的規則:
```
如果幾個行內框在水平方向無法放入一個行框內,它們可以分配在兩個或多個垂直堆疊的行框中(即行內框的分割)
行框在堆疊時沒有垂直方向上的分割且永不重疊
行框的高度總是足夠容納所包含的所有框。不過,它可能高于它包含的最高的框(例如,框對齊會引起基線對齊)
行框的左邊接觸到其包含塊的左邊,右邊接觸到其包含塊的右邊。
```
**結合補充下IFC規則:**
```
浮動元素可能會處于包含塊邊緣和行框邊緣之間
盡管在相同的行內格式化上下文中的行框通常擁有相同的寬度(包含塊的寬度),它們可能會因浮動元素縮短了可用寬度,而在寬度上發生變化
同一行內格式化上下文中的行框通常高度不一樣(如,一行包含了一個高的圖形,而其它行只包含文本)
當一行中行內框寬度的總和小于包含它們的行框的寬,它們在水平方向上的對齊,取決于 `text-align` 特性
空的行內框應該被忽略
即不包含文本,保留空白符,margin/padding/border非0的行內元素,
以及其他常規流中的內容(比如,圖片,inline blocks 和 inline tables),
并且不是以換行結束的行框,
必須被當作零高度行框對待
```
總結:
- 行內元素總是會應用IFC渲染規則
- 行內元素會應用IFC規則渲染,譬如`text-align`可以用來居中等
- 塊框內部,對于文本這類的匿名元素,會產生匿名行框包圍,而行框內部就應用IFC渲染規則
- 行內框內部,對于那些行內元素,一樣應用IFC渲染規則
- 另外,`inline-block`,會在元素外層產生IFC(所以這個元素是可以通過`text-align`水平居中的),當然,它內部則按照BFC規則渲染
相比BFC規則來說,IFC可能更加抽象(因為沒有那么條理清晰的規則和觸發條件)
但總的來說,它就是行內元素自身如何顯示以及在框內如何擺放的渲染規則,這樣描述應該更容易理解
- 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