inline-block前端程序猿們肯定不陌生，它是display屬性的一個取值。
之所以稱之為inline-block。是因為它兼具行內元素(inline-element)和塊級元素(block-element)的特征。
- 塊級元素（block elements）,來源於CSS盒子模型。塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列。 行內元素，排列方式是水平排列。
- 行內元素（inline elements）排列方式是水平排列。
- 行內塊元素（inline-block elements）在內部他的表現類似block元素，比如他擁有block元素的width height,即可以設定自己的高寬值，亦可以設定自己的padding,border與margin，而外部的排列方式有類似行內元素，即水平排列，而不是像塊級元素一樣從上到下排列。
Replaced element 置換元素
說到這，有必要提的就是置換元素。何為置換元素，在html中，有類特殊的元素如:
<img>|<input>|<button>|<select>|<textarea>|<label>
他們被稱為可置換元素（Replaced element）。他們區別一般inline元素（相對而言，稱non-replaced element）是：這些元素擁有內在尺寸(intrinsic dimensions),他們可以設置width/height屬性。他們的性質同設置了display:inline-block的元素一致。上述六個標簽在現代瀏覽器中即為天生的inline-block元素。
包裹性
包裹性的另一種說法就是讓元素inline-block化。意思是默認情況下一個div的寬度是以100%顯示的，而一旦給這個div添加了postion:absolute屬性，則100%的默認寬度會變成自適應的內部元素寬度。而諸如：
overflow | position:absolute | float:left/right 等都可以讓元素inline-block化產生包裹性。
而包裹性的作用很多，其中一個是可以使用其來清除元素的浮動。
inline-block的作用
css布局創建網站,浮動絕對占據了很大的比例.大塊區域如主內容及側邊欄,以及在其中的小塊區域,都可以看到浮動的影子。只是浮動經常會產生一些問題，那么問題來了？浮動是唯一的解決方案嗎?
浮動通常表現正常，但有時候搞起來會很糾結。特別是處理內部容器中的浮動，比如對一排圖片使用浮動后對齊出現問題。So，inline-block是我們的另一種選擇。使用這種屬性可以模擬部分浮動的特征，而不需要處理一些浮動帶來的問題。
這里極力推薦一篇張鑫旭的文章：拜拜了浮動布局-基於display:inline-block的列表布局。文章講解的非常透徹，也將使用inline-block需要解決的兼容問題給出了十分詳盡可靠的解決方案。
inline-block和float的區別
雖然設置浮動跟設置inline-block有些特征類似，但兩者的區別還是非常明顯的:
- 文檔流（Document flow）:浮動元素會脫離文檔流，並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。因此設置inline-block不需要清除浮動。當然，周圍元素不會環繞這個元素，你也不可能通過清除inline-block就讓一個元素跑到下面去。
- 水平位置（Horizontal position）：很明顯你不能通過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。但是父元素內元素如果設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。（這還是因為浮動元素脫離文檔流的關系）。
- 垂直對齊（Vertical alignment）：inline-block元素沿着默認的基線對齊。浮動元素緊貼頂部。你可以通過vertical屬性設置這個默認基線，但對浮動元素這種方法就不行了。這也是我傾向於inline-block的主要原因。
- 空白（Whitespace）：inline-block包含html空白節點。如果你的html中一系列元素每個元素之間都換行了，當你對這些元素設置inline-block時，這些元素之間就會出現空白。而浮動元素會忽略空白節點，互相緊貼
- IE6和IE7：Ie67對此屬性部分支持。如果你要兼容這些瀏覽器，必須解決這個問題。可參照去除inline-block元素間間距的N種方法
。