『inline-block是什么怀愧？
Inline-block是元素display屬性的一個值侨颈。display設置這個值的元素，兼具行內元素（ inline elements）跟塊級元素（block elements）的特征芯义。
.塊級元素（block elements）,來源于CSS盒子模型哈垢。 塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列扛拨。 行內元素耘分，排列方式是水平排列。
.行內元素（inline elements）排列方式是水平排列绑警。
.行內塊元素（inline-block elements）在內部他的表現(xiàn)類似block元素求泰，比如他擁有block元素的width height,padding,border與margin，而外部的排列方式有類似行內元素计盒，即水平排列渴频，而不是像塊級元素一樣從上到下排列.』
inline-block元素跟元素設置浮動后的表現(xiàn)差別并不是很大。對盒子設置浮動后北启，同樣會水平排列卜朗。雖然他們實現(xiàn)的原理不同拔第，但內部表現(xiàn)為塊級元素，水平排列這種需求场钉，浮動跟inline-block都適合實現(xiàn)蚊俺。
『inline-block和float的區(qū)別
【雖然設置浮動跟設置inline-block有些特征類似，但兩者的區(qū)別還是非常明顯的:】
文檔流（Document flow）:浮動元素會脫離文檔流逛万，并使得周圍元素環(huán)繞這個元素泳猬。而inline-block元素仍在文檔流內。因此設置inline-block不需要清除浮動宇植。當然得封，周圍元素不會環(huán)繞這個元素，你也不可能通過清除inline-block就讓一個元素跑到下面去指郁。
水平位置（Horizontal position）：很明顯你不能通過給父元素設置text-align:center讓浮動元素居中呛每。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素坡氯。但是父元素內元素如果設置了display：inline-block晨横，則對父元素設置一些定位屬性會影響到子元素。（這還是因為浮動元素脫離文檔流的關系）箫柳。
垂直對齊（Vertical alignment）：inline-block元素沿著默認的基線對齊手形。浮動元素緊貼頂部。你可以通過vertical屬性設置這個默認基線（悯恍！important）库糠，但對浮動元素這種方法就不行了。這也是我傾向于inline-block的主要原因涮毫。
空白（Whitespace）：inline-block包含html空白節(jié)點瞬欧。如果你的html中一系列元素每個元素之間都換行了，當你對這些元素設置inline-block時罢防，這些元素之間就會出現(xiàn)空白艘虎。而浮動元素會忽略空白節(jié)點，互相緊貼
IE6和IE7：Ie67對此屬性部分支持咒吐。如果你要兼容這些瀏覽器野建，必須解決這個問題。這不是個大問題恬叹，但值得留意一下候生。』
『解決空白問題
你現(xiàn)在估計已經躍躍欲試了唠粥，不過估計不想讓那些空白出現(xiàn)。這里有一些方法來去掉空白:
刪除html中的空白：不要讓元素之間換行停做，這可能比較蛋疼，但也是一種方法大莫，特別是你元素不多的時候蛉腌。
使用負邊距：你可以用負邊距來補齊空白。但你需要調整font-size只厘，因為空白的寬度與這個屬性有關系烙丛。maybe 0.25em?
給父元素設置font-size:0：不管空白多大，由于空白跟font-size的關系羔味，設置這個屬性即可把空白的寬度設置為0. 在實際使用的時候河咽，你還需要給子元素重新設置font-size「吃』
『什么時候使用inline-block忘蟹，什么時候使用float
什么時候使用，取決于你的設計稿跟解決方法搁凸。如果你需要文字環(huán)繞容器媚值，那浮動是不二選擇。如果你需要居中對齊元素护糖，inline-block是個好選擇褥芒。
使用inline-block：當你需要控制元素的垂直對齊跟水平排列時，使用inline-block嫡良。
使用浮動：當你需要讓元素環(huán)繞某一個元素時锰扶，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時寝受，使用浮動坷牛。』
『使用場景一：浮動很澄、inline-block和圖像排列（inline-block主要是為了處理垂直對齊問題漓帅。）
使用場景二：inline-block導航（橫向導航欄）
當你需要將元素排列成一行或者多行時，更傾向于考慮使用inline-block代替float痴怨。當然忙干，直接使用table也是一種方法，他畢竟是專門用來處理橫向與縱向排列的元素的浪藻。
如果你需要創(chuàng)建一個很復雜的包含行列的布局捐迫，table是你的最佳選擇，不過你同樣也可以考慮inline-block爱葵∈┐鳎』
總結：如果你很糾結垂直對齊問題或者橫向排列元素反浓，不妨使用inline-block。如果你需要對一個元素跟圍繞他的一些元素進行更多控制赞哗，你需要浮動雷则。
