[toc]
## pre
塊級負責結構,內聯負責內容
## 什么是內聯元素
內聯元素的內聯特指**外在盒子**(非容器/內在盒子),并且和display:inline不是一個概念。
`inline`、`inline-block`、`inline-table`都是內聯元素,因為它們的外在盒子都是內聯盒子。
就行為表現來看,內聯元素的典型特征就是可以和文字在一行顯示。
因此文字是內聯元素,圖片是內聯元素,按鈕是內聯元素,輸入框和下拉框等原生表單控件也是內聯元素。
## 內聯盒模型
### 內容區域(content area)
內容區域指一種圍繞文字看不見的盒子(鼠標select選中文本后變藍的那部分區域)
實際上并沒有明確的定義,你可以把它當做一個em-box, 中文字符占據的1em高度區域,
(還有一種說法->)也可將它等同于基本盒尺寸的content-box,都是content,語義上也說得通(**誤!!**,content-box實際上應該由lineHeight決定,即em-box+上下半行間距)。
如果盒子非內聯盒子而是塊級盒,就會像下栗
 (可以發現content-area區域小于content盒子區域(hotpink部分))
>[danger] content-area不等同于content-box
在IE和Firefox瀏覽器下,文字選中背景總能準確反映內容區域范圍,但是Chrome瀏覽器下,`::selection`范圍并不總是準確的,例如,和圖片混排或則有垂直padding的時候,范圍會明顯過大,這一點需要注意。
#### character-box
內容區域指一種圍繞文字看不見的盒子,其大小僅受字符本身特性控制,本質上是一個字符盒子(`character box`)(?等價于em-box+兩個半行間距,其實就是一個中文字符的line-height)
#### 元素自身
而對于圖片這樣的**替換元素**,其內容顯然不是文字,不存在字符盒子之類的,因此對于這些元素,內容區域可以看成元素自身。
### 內聯盒子(inline box)
內聯盒子不會讓內容成塊顯示,而是排成一行,這里的內聯盒子實際指的就是元素的**外在盒子**,用來決定元素是內聯還是塊級。
#### 實名內聯盒子
如果外部含內聯標簽(`<span>、<a>、<em>等`)則屬于實名內聯盒子,簡稱內聯盒子
#### 匿名內聯盒子
如果只是光禿禿的文本,則屬于匿名內聯盒子
但需要注意的是并不是所有光禿禿的文字都是匿名內聯盒子,其**還有可能**是匿名**塊級**盒子。
關鍵是要看前后的標簽是內聯還是塊級(如果前后是塊級,那么這個匿名盒子也會獨占一行,So也就為一個塊級匿名盒子)
### 行框盒子(line box)
也就是一行組成的一個盒子。
每一個行框盒子都是由一個個內聯盒子組成的。
>[warning] **注意:** 行框盒子并不等于塊級盒子,它并不是一個標簽元素,而是由在一行顯示的所有內聯盒子組成的一個不可見的盒子。并且只有由內聯盒子組成的才叫行框盒子。
>
### 包含盒子/包含塊(containing box/block)
由一行一行的**行框盒子**組成的一個大盒子就叫包含盒子。
這個包含塊一定是塊級盒子嗎?
我們不關心它的外在盒子是怎么樣的,**它的內在盒子/容器盒子 一定是塊級**,只有當內在盒子為塊級盒時,才能夠容納行框盒子,只有存在行框盒子時才會一行一行的顯示,內聯盒子們才會作為一行里的一部分被換行。

(即使限制了寬度,也不會換行顯示,圖文內容權重高于布局,也就會無視css設置的30px寬度)

(設置了block,則表示內容能夠換行,這也是塊級元素的特性之一)
## 幽靈空白節點(strut)
>html5文檔聲明下
strut,在英文中的含義是**支柱**的意思。
規范中是這樣定義的
>Each line box starts with a zero-width inline box with the element's font and line height properties.We call that imaginary box a "strut"。
>
>[danger] display:inline 的元素如果內部為空,是不會在所處行框產生幽靈空白節點的,
>
>而display:inline-block 的元素即使內部為空 也是會產生幽靈空白節點的
>
```
<div><span style="display:inline-block"></span></div>
```
無其它任何CSS代碼,可以發現父容器被撐開了

- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端