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種方法
。

?

　　

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的浅析inline-block--使用inline-block创建布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。