首先說下inline、block、inline-block的區別
inline：行內元素顯示前後無換行符
block：塊級元素
inline-block： 行內塊元素
重點說下inline-block這個屬性。經過測試當display：inline-block的時候，本身為塊元素的html標籤（比如 div等）應用此樣式在ie8+、chrome、firefox 會將塊元素轉換成行內元素，但是依然有塊元素的特徵。可以設定寬高等塊元素的屬性。有點類似float的時候。但是在ie6\7下，塊元素應用inline-block，可以設定寬高，但是不會幾個塊級元素都呈現在一行上。
本身為內聯元素的html標籤 （比如 span 、a等），應用display：inline-block 可以呈現塊元素的特徵 可以設定寬高。在所有瀏覽器下，display：inline-block 對行內元素是支援比較好的。
下面是測試**及效果
塊元素11
1111
11行元素
ie 6/7下的顯示效果
其他瀏覽器的顯示效果
關於inline block的使用
在手機端移動網頁開發中我不喜歡使用浮動布局，所以使用一些其他的，比如inline block 問題 在inline block使用過程中發現，長度有時候總是不受控制，比如70 30 100 而自動換行的問題。解決 發現兩個inline block之間如果有留白，則就會出現上面的問題，解決辦法一 標籤...
關於inline block和float的對比
當把元素的display屬性設定為inline block時可以是元素變成行級元素 前後不換行 但是還可以設定一些塊級元素的屬性，從而實現元素的並列。當然將元素設為浮動也可以實現元素的並列 文件流 inline block不會脫離文件流，仍然在文件裡佔據正常的位置，但是float的元素會脫離文件流 ...
解決關於inline block元素換行問題
昨天群裡有人問個問題 為什麼button加了文字後，產生了對齊不一致的問題。原因在於baseline的對齊問題。其中裡面最後乙個例子講到了如何解決inline元素換行的問題。裡面說用注釋可以解決換行問題，我測試了下發現和注釋完全沒有關係。換行的原因在於div與div換行製表符產生的空隙，所以要避免換...