css inline-block

 

轉載！原文地址：http://www.javashuo.com/article/p-pmpepudv-ns.html

 

inline-block前端程序猿們確定不陌生，它是display屬性的一個取值。

　　之因此稱之爲inline-block。是由於它兼具行內元素(inline-element)和塊級元素(block-element)的特徵。

1. 塊級元素（block elements）,來源於CSS盒子模型。塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列。 行內元素，排列方式是水平排列。
2. 行內元素（inline elements）排列方式是水平排列。
3. 行內塊元素（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有些特徵相似，但二者的區別仍是很是明顯的:

1. 文檔流（Document flow）:浮動元素會脫離文檔流，並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。所以設置inline-block不須要清除浮動。固然，周圍元素不會環繞這個元素，你也不可能經過清除inline-block就讓一個元素跑到下面去。
2. 水平位置（Horizontal position）：很明顯你不能經過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。可是父元素內元素若是設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。（這仍是由於浮動元素脫離文檔流的關係）。
3. 垂直對齊（Vertical alignment）：inline-block元素沿着默認的基線對齊。浮動元素緊貼頂部。你能夠經過vertical屬性設置這個默認基線，但對浮動元素這種方法就不行了。這也是我傾向於inline-block的主要緣由。
4. 空白（Whitespace）：inline-block包含html空白節點。若是你的html中一系列元素每一個元素之間都換行了，當你對這些元素設置inline-block時，這些元素之間就會出現空白。而浮動元素會忽略空白節點，互相緊貼
5. IE6和IE7：Ie67對此屬性部分支持。若是你要兼容這些瀏覽器，必須解決這個問題。可參照去除inline-block元素間間距的N種方法