[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代碼，可以發現父容器被撐開了