Inline-block是元素display屬性的一個(gè)值。這個(gè)名字的由來(lái)是因?yàn)?，可以?jiǎn)單的解釋為inline+block ；display設(shè)置這個(gè)值的元素，兼具行內(nèi)元素（ inline elements）跟塊級(jí)元素（block elements）的特征。塊級(jí)元素（block elements）來(lái)源于CSS盒子模型。塊級(jí)元素包含width height,padding,border與margin，他們的排列方式是從上到下排列。 行內(nèi)元素（inline elements）排列方式是水平排列。行內(nèi)塊元素（inline-block elements）在內(nèi)部他的表現(xiàn)類似block元素，比如他擁有block元素的width height,padding,border與margin，而外部的排列方式有類似行內(nèi)元素，即水平排列，而不是像塊級(jí)元素一樣從上到下排列。因此inline-block元素跟元素設(shè)置浮動(dòng)后的表現(xiàn)差別并不是很大。對(duì)盒子設(shè)置浮動(dòng)后，同樣會(huì)水平排列。雖然他們實(shí)現(xiàn)的原理不同，但內(nèi)部表現(xiàn)為塊級(jí)元素，水平排列這種需求，浮動(dòng)跟inline-block都適合實(shí)現(xiàn)。

如何從兩者之間進(jìn)行選擇取決于你的設(shè)計(jì)稿跟解決方法。如果你需要文字環(huán)繞容器，那浮動(dòng)是不二選擇。因?yàn)楦?dòng)元素會(huì)脫離文檔流，并使得周圍元素環(huán)繞這個(gè)元素。而inline-block元素仍在文檔流內(nèi)；如果你需要居中對(duì)齊元素，inline-block是個(gè)好選擇，很明顯你不能通過(guò)給父元素設(shè)置text-align:center讓浮動(dòng)元素居中。事實(shí)上定位類屬性設(shè)置到父元素上，均不會(huì)影響父元素內(nèi)浮動(dòng)的元素。但是父元素內(nèi)元素如果設(shè)置了display：inline-block，則對(duì)父元素設(shè)置一些定位屬性會(huì)影響到子元素。

使用inline-block：當(dāng)你需要控制元素的垂直對(duì)齊跟水平排列時(shí)，使用inline-block。
使用浮動(dòng)：當(dāng)你需要讓元素環(huán)繞某一個(gè)元素時(shí)，或者需要支持舊版本ie，或者不想處理inline-block帶來(lái)的空白問(wèn)題時(shí)，使用浮動(dòng)。

對(duì)于圖片列表來(lái)說(shuō)。若父元素中的圖片等高，設(shè)置浮動(dòng)就會(huì)工作正常。但一旦有一列圖片比較高時(shí)，圖片的排列就會(huì)出現(xiàn)問(wèn)題。這是因?yàn)楦?dòng)后，圖片脫離了文檔流。而inline-block由于未脫離文檔流，不會(huì)出現(xiàn)這個(gè)問(wèn)題。如果你想再創(chuàng)建一列圖片時(shí)，不會(huì)受到上一列圖片inline:block的影響，因此也不需要清除浮動(dòng)。而你在使用附送時(shí)則需要時(shí)刻注意清除浮動(dòng)，當(dāng)內(nèi)容不斷變化時(shí)這很容易產(chǎn)生bug。

對(duì)比如下：
 
上圖，把一系列元素設(shè)置了浮動(dòng)，因?yàn)楹凶佣?hào)寬度的關(guān)系，可以發(fā)現(xiàn)盒子五號(hào)被擠進(jìn)去了（這些元素都脫離了文檔流），這是圖片排列中很常見(jiàn)的問(wèn)題。
 
上面的塊級(jí)元素被設(shè)置了inline-block。由于他們沒(méi)有脫離文檔流，所以元素不會(huì)被某個(gè)過(guò)長(zhǎng)的列擠上來(lái)。

最新評(píng)論