主要是閱讀了yachen168.github.io/article/dis…

display其實定義了兩個display type？

• outer display type：決定元素本身在 in flow 下如何佈局（也就是它參與的是什麼佈局環境）

• inner display type：決定它為後裔元素能建立什麼樣的佈局環境。

其實可以這麼想，css在對待每個元素時都會考慮：你是不是之後也要自立門戶當容器？所以它會為它指派兩個可以決定佈局環境display，一個代表它自己所在的佈局環境，一個代表它之後成為容器後的佈局環境。（當然不能做容器的那些標籤就抱歉嘍）

outer display type

• inline-level box
• block-level box

inline-level box參與的都是Inline Formatting Context（行內佈局環境）。而block-level box 參與的都是box Formatting Context。這個還算好理解，也就是說block級元素參與的是block佈局環境，而inline元素參與的是inline佈局環境。

inner display type

根據元素的不同，當它成為一個容器時，能為其後裔建立的佈局環境不同。其實這個也很好理解，比如block container可以建立BFC，也可以建立IFC，inline container則只能建立IFC。

了解這個的好處？

感覺最直接的好處是讀官方文檔會更便利，會避免看到一些生詞。比如我查找vertical-align。

文檔中就會寫：它適用於table-cell元素和inline-level元素。了解前面的知識後看這個就會更清楚。