inline-block和inline,block,table,table-cell的區別是什麼，就是之間有什麼特性？

01-05

如題，就比如說。瀏覽器是如何渲染block，block相比其他的有什麼區別，在渲染上有什麼區別？？

瀉藥

這題太大了。

的確你得好好看看 CSS 2 的 9（可視化布局模型）、10（可視化布局模型細節）、17 （表格）這三章才行。

簡單說下一些明顯差異。

inline-block 是寬高margin設定有效，參與行內格式化上下文，在行內對齊時使用它自己的框底邊為基線對齊位置（大致是吧，雖然某些替換元素實現的不一定）
linline 無視寬高設定，無視上下margin設定，參與行內格式化上下文，在行內對齊時使用它內文字基線作為基線對齊位置
block 寬高設定有效margin有效，參與塊格式化上下文，如果處於行內框內，則行內框會被迫打斷一分為二成兩個新行內框。
table ，參與塊格式化上下文，大體同 block。
inline-table，處於行內格式化上下文中，大體同 inline-block。但是基線是以單元格（所謂的table box）底邊為準，而不是以整個表的包裹框為準。
table-call , 這個最複雜，比如沒有 margin，可跨多行列，不能超過行組列組最後一個框，匿名狀態中float和position可能會破壞其 table-call 狀態等。（寫到這好像有點明白了，貌似這個是要問如果非td th 啥的給了 table-call 會咋樣吧）

大致這樣吧……

基礎：

Visual formatting model

詳解：

Visual formatting model details

要系統了解就看這個。

默認display:block的元素（塊元素）：

默認display:inline的元素（內嵌元素 / 內聯元素 / 行內元素）：

塊和內嵌的轉換：

display：block 顯示為塊

display：inline 顯示為內嵌

display:inline-block

注意：ie6 ie7 不支持塊標籤的inline-block

我在codepen上面試了下www：

inline:

在行內對齊時使用父元素輪廓線作為對齊位置

inline-block：

在行內對齊時使用父元素邊框線作為對齊位置

block：

table：

元素作為塊級表格顯示，後面有換行符

tabl-cell：

元素作為表格單元格顯示看了高票答案補充個inline-table：

元素作為內聯表格顯示（同inline-block）

詳見w3c css教程