比float更好的網頁布局之inline-block

一：網頁布局發展曆程

• 表格布局
• 表格+css
• div+css的浮動布局
• div+css的內聯塊布局

二：流行多年的浮動布局的優劣

優勢：

div+css浮動布局的優勢，主要是相對於table布局來說的，主要表現為以下幾個方面：
1，更快的網頁呈現速度；
2，更佳的後台編程支援度；
3，更好的搜尋引擎友好性；
4，更優的網頁修改重構性。

劣勢：1，一行盒子的高度有出入可能導致將下一行的盒子“卡住 ”，像俄羅斯方塊放錯地方的時候被“卡住”後下面空出一塊空間；
2，浮動元素導致其上級父盒子的“高度塌陷”，也就不能如正常文檔結構所體現的那樣自然包裹其下級元素；
3，浮動元素還導致其後的兄弟元素也跟著浮動元素到同一行了；
4，其他若干在IE6/7下讓微軟蒙羞的著名bug也多與浮動有關。

三：inline-block布局：一種更優的布局技術

1）inline-block布局：一種全新的web頁面配置解決方案，其既可以充分發揮div+css浮動布局的優點，又可克服浮動盒子所帶來的缺點

• 什麼是inline模式的盒子：一個盒子在一行內連續排列出來，後一個緊跟著前一個在一行中，直到碰到行尾後再自然換到下一行繼續如此顯示。行內盒子不能設定寬度和高度，也沒有上下margin和padding（但左右margin和padding存在）。常見行內元素：span，a，img，b，i，u
• 什麼是block模式的盒子：一個盒子自身就佔據其所在父盒子中的一整行，而不管其本身的寬度多少，也不會“折行”。常見塊元素：div，hr，p，ul/li，ol/li，dl/dt/dd，h1-h6，pre，form

2）那麼inline-block的表現又是什麼呢？

• 盒子跟外界（其兄弟元素）表現為內聯（inline）模式，即可以跟其兄弟元素自然並排放置（類似img標籤） ，但盒子作為整體，又表現為塊模式，即該盒子本身不能“自動換行顯示”，可以設定寬高。
• 實際上，從整體表現上來說，inline-block盒子的表現非常類似“img”元素，即多個img可以在一行中出現，但一個img本身是不會“中間折行”的（對比：span和a標籤碰到了行尾都會自動折行）。只不過img作為圖片顯示元素，其“內部”不能放其他內容了，而inline-block盒子卻是我們最常規的可任意放置其他內容的一個“容器”。

3）各種布局本質上解決什麼問題？所謂布局，無非其實就是解決元素放置到頁面上的排布方式。從“平面區塊”的角度來說，不管用哪種布局方式，無非就是解決2個問題：

• 元素怎麼從上到下排列出來：

塊元素（如div）自然上下，br元素明確換到下一行，tr元素表示表格的行。可見上下排列關係中，無需額外css技術。

• 元素怎麼從左至右排列出來：

• 布局原理：層層 劃分“目前範圍”

• 劃分方法有兩個：

inline-block布局的特點和做法非常簡單：

• 根據我們前面的inline-block的表現的介紹，和布局的本質思想，我們實現inline-block模式的布局非常簡單：

四：inline-block布局要解決的問題(實現相容性的做法)

• 我們很快發現，如果頁面不考慮象素級的精確設計，使用inline-block技術進行布局非常容易理解和容易實現，幾乎跟我們在地面上貼瓷磚一樣。但我們也發現，被inline-block化之後的盒子，盒子跟盒子之間有幾個像素的間隙，就像圖片自然並排放置一起時的樣子，這顯然對現代像素級的設計需求來說是不夠的！那怎麼解決：

• 這裡將block元素轉為inline-block元素有兩個容易解決的相容性問題：

xxx { *display:inline;}/*再寫回“inline”模式，這是對IE6/IE7相容，只有這樣IE6/7才表現為行內塊盒子*/

此負值在font-size為0的情況下，對其他瀏覽器無影響；

此負值大小受字型名稱和字型大小影響，需根據場合略調整。比如常見的12px的Arial字型是-4px，12px的宋體是-8px

• 將inline元素轉為inline-block元素也行，但相容性更差些，不推薦

五：inline-block布局應用（案例示範）

最後的總結代碼如下：

/*應用到inline-block布局的外面盒子*/.out{font-size:0px;/*inline-block布局的核心代碼1*/letter-spacing:-8px;/*相容代碼1：相容蘋果瀏覽器，負值對其他瀏覽器無效*/text-align:center;/*inline-block布局的輔助代碼1，可以left，center，right*/}/*應用到inline-block布局的裡面盒子*/.in{display:inline-block;/*inline-block布局的核心代碼2*/vertical-align:top;/*inline-block布局的輔助代碼2，可以top, middle, bottom*/}.in{*display:inline;/*相容代碼2：相容 IE6/7*/}

參考資料：

傳智播客羅弟華老師研究 inline-block布局技術 視頻下載

連結:http://pan.baidu.com/s/1sjrqYfj 提取密碼:gh3r

CSS float浮動的深入研究、詳解及拓展(一)
http://www.zhangxinxu.com/wordpress/?p=583
CSS float浮動的深入研究、詳解及拓展(二)
http://www.zhangxinxu.com/wordpress/?p=594
拜拜了,浮動布局-基於display:inline-block的列表布局
http://www.zhangxinxu.com/wordpress/?p=1194
inline-block 前世今生
http://ued.taobao.org/blog/2012/08/inline-block/
CSS浮動布局與inline-block
http://www.keakon.net/2010/11/13/CSS%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80%E4%B8%8Einline-block