精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

一、一抹前言

沒有愛的日子，時間如指尖細沙，不知不覺就流逝了。寫“CSS float浮動的深入研究、詳解及拓展(一)”和“CSS float浮動的深入研究、詳解及拓展(二)”似乎就在不久前，然而相隔差不多有一年之久了。文章最后留下了“浮動布局更好的替代方案是什么？”后文再介紹的預告。

由于自己肚子中的貨物不足以撐起一篇足夠質量的文章，所以關于“浮動布局更好的替代方案是什么？”的文章一直并未動筆。好在事物總是在發展的，我也是每天都是在進步，對于列表布局的思考也愈發成熟。加上正好前不久又有人詢問我“浮動布局的替換方案是什么”，于是覺得介紹“浮動布局的替換方案“的時機成熟了。

要注意，本文的布局專指列表布局。就是具有相同DOM結構的水平排列可以repeat出來的列表元素。如QQ校友中的圖片列表（圖片截自老同學相冊，已隱去名字）：

二、列表浮動布局的局限

列表浮動布局就是指通過使用float屬性，讓列表元素依次排列的布局（通常是左浮動，float:left）。這是相當常見的也是目前最最主流的列表布局方式，所以這里就不吃咸魚蘸醬油——多此一舉show代碼了。

對于浮動局部的局限性，想必同行們都知道，就是每個列表元素的高度必須要一致，否則就會像是俄羅斯方塊一樣，“鋸齒相錯”，例如一個左浮動列表布局，如果第一行有個列表高度高于其他列表，那就在第二行，第一個元素會沿著最高元素的右側對齊，此原因是屬于惡魔系的float屬性破壞了inline box（具體參見前兩篇float的文章）。

那發展勢頭的新浪微博舉例，其右側人氣用戶的模塊，姓名是限高的，現在用firebug去掉這個限高屬性，看看結果會如何：

可以看到，列表元素就像是俄羅斯方塊卡錯了位置一樣，錯開了。所以，如果我們要使用浮動布局列表，就必須限高，于是，不得已，需要裁掉超多的用戶名信息。

浮動本身就是個魔鬼，所以，使用浮動布局還需要修復其帶來的副作用——高度塌陷的問題，也就是常提到的“清除浮動”了。

另外，IE6下，重復的列表元素會出現莫名的bug，例如出現不知哪來的文字。

由于浮動布局學習與理解的門檻低，又受主流之風驅動，且滿足了絕大多數的布局需求。所以，在追尋更好的布局方式上，大家的愿望似乎不是很強烈，當然，可能是自己井底之蛙了，不過從國內領先網站的列表布局情況來看，貌似浮動布局還是扎根很深的（這回在列表布局上，人人網讓我刮目了一把）。

三、提一提表格布局

在表格布局時代，我們基本上不用擔心列表元素高度不一會錯位的問題，表格中的單元格(td標簽)自動回等高關聯，且水平列表項還包裹在tr等標簽中，所以，不可能發生錯位。所以，很正常的，我們會想到利用類似table屬性的樣式進行一些布局，例如display:table; display:table-row; display:table-cell;等屬性，對此我是建議您看看支付寶UED的“基于display:table的CSS布局”一文，如果不是受制于IE6/7對這些display屬性不支持，基于display:table的CSS布局定會大放異彩的。

如果想使用display:table的CSS布局來代替浮動布局，權衡來看，不見得有提高。好的地方在于，不要擔心列表元素的高度不一，甚至自動等高。撇開兼容性不談，其還有不足在于在后臺循環輸出時需要水平repeat下，然后再垂直repeat。既然這樣，還不如使用浮動布局，因為在這種情況下，使用浮動也是可以不用擔心高度不一的問題的，這就是facebook好友列表的做法（oh, 該死，facebook上不去，想截個圖的）。所以，基本上，使用display:table的CSS布局來代替浮動布局是完全占據下風的。因而，這里就不瞎子點燈白費蠟了，如一絲寒意的秋風，輕輕帶過。

四、另外一種display屬性，display:inline-block

display:inline-block感覺與display:table-cell有些相似，例如對內部元素的包裹性。但是，由于display:inline-block最大的不同就是其沒有父元素的匿名包裹特性，這使得display:inline-block屬性的使用非常自由，可與文字，圖片混排，可內嵌block屬性元素，可以可以置身于inline水平的元素中。可謂黑白通吃，左右逢源。

inline-block屬性的元素適用于inline box模型，所以，當其中的列表元素高度不一時，是不會有錯位的。關于line box模型，我在之前的“css行高line-height的一些深入理解及應用”第二部分提到了，以及前面“CSS float浮動的深入研究、詳解及拓展(一)”一文的“浮動的破壞性”部分中做過比較詳細的介紹。一言以蔽之，就是每一行所有的inline元素和inline-block元素會共同形成一個line boxes，這個line box的高度由里面最高的元素決定。所以，即使inline-block屬性的列表元素高度異常，撐開的是整個line boxes的高度，因而，不會與下一行的列表元素發生錯位。如下面的我自己畫得拙劣的示意圖所示的：

根據一些前輩的說法，IE6/7不支持display:inline-block屬性，只是可以讓標簽有類似于inline-block的屬性，起初我也是接受這種說法的，不過后來又表示了懷疑，最近使用text-align:justify;做測試的時候的一些樣式表現證實了：確實IE6/7是不支持display:inline-block屬性，只是讓其表現的跟inline-block一樣，尤其對于inline水平的元素，其表現度可以用perfect一詞來形容了。

對于IE8+以及現代瀏覽器，直接使用：

{display:inline-block;}

就可以了，支持任意水平的元素。

對于不支持的IE6/7瀏覽器該怎么辦呢？如果是inline水平的元素（如a標簽，span標簽之類）跟上面一樣，直接：

{display:inline-block;}

就可以了，對于這兩個瀏覽器，其功效與*zoom:1;是一樣的。

如果是block水平的元素，例如li標簽。則需要多點代碼，目前我知道的方法有兩個，如下所示：

li {display:inline-block;...}li {display:inline;}

或者是：

li{display:inline; zoom:1;...}

block水平的inline-block化的元素與inline水平的在表現層又是有差異的，這個后面會談到。

五、一點小阻撓：inline-block元素間的換行符空格間隙問題

在完整的展示兼容性的像素級的inline-block元素列表布局前，有必要講講使用display:inline-block列表布局經常會遇到的“換行符/空格間隙問題”。

如果inline-block元素間有空格或是換行產生了間隙，那是正常的，應該的。如果沒有空格與間隙才是不正常的（IE6/7 block水平元素）。真正的inline-block元素，就像個圖片一樣。例如，兩個不在一行的img標簽，形成的兩個圖片之間就會有間隙，如下圖所示：

您可以狠狠地點擊這里：換行符與inline-block元素間間隙demo

要讓這些空格不出現，最簡單的最容易理解的就是讓列表的結束標簽與下一個列表的開始標簽連在一起，就像是：

<li>    <span>...</span></li><li>    <span>...</span></li>

但是，這種做法好傻啊，而且HTML代碼的可讀性很不好。尤其考慮到現實情況：后臺人員可能不清楚標簽換行對樣式的影響，直接后臺repeat的時候，換行了。所以，此方法頂多臨時應付些小打小鬧的地方，要想廣泛使用，顯然業余了。

其實，我們只要細細想想，空格符本質上就是個字符，與a,b,c,d這些字符是個同一個屬性的東西，只是他是空格，透明的看不見而已（但可以選中）。所以，只要我們使用讓文字寬度為0的那些方法，不就可以解決inline-block元素間換行符間隙的問題啦！

于是，很自然而然的，想到了以下樣式：

{font-size:0;}

我還記得我大學時候解決IE6下標簽高度無法小于11像素bug時的方法，就是使用的font-size:0;這屬性可以讓莫名的空格啊神馬東東的都變成浮云。我們來試下，可否用來消除inline-block元素間的換行間隙的問題。
如下測試代碼：

<div style="font-size:0;">    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></div>

現在來看看幾個主流瀏覽器下的反應，首先是Firefox瀏覽器：

然后是IE7瀏覽器：

哦呵呵，來看看大神Chrome瀏覽器：

希望越大失望越大，Chrome下的空格對于font-size:0貌似很不屑一顧。唉，這個問題在Chrome還是嬰兒階段的時候就有了，到現在還沒有改過來。
經過我稀里嘩啦一輪番的瀏覽器測試，發現就只有Chrome瀏覽器對font-size:0置若罔聞，連同樣內核的Safari都不會這樣。

您可以狠狠地點擊這里：font-size:0清除換行符間隙demo

雖然Chrome目前國內份額有限，但是畢竟有不少高端用戶在用啊。所以，一旦Chrome不支持font-size:0，那么，此方法顯然不能應用到實際項目中，在加上IE和Safari下還是有1像素的間隙，所以此方法就此刷掉。現在得去考慮其他更好的方法。

我們一起開動腦筋，還有什么CSS屬性可以影響文字的水平間距的。啊，只見腦袋上燈泡一亮，有了，不是有個letter-spacing屬性嘛。可以控制文字間的水平距離的，支持負值，可以讓文字水平方向上重疊（line-height是讓文字垂直方向上重疊）。喲呵呵，心動不如行動，還拿那兩張美女圖片做示例，看看letter-spacing屬性可否抹掉換行符產生的間距。參見如下測試代碼：

<div style="letter-spaceing:-4px;">    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></div>

先來看看一向表現優異的Firefox3.6瀏覽器，如下圖：

很不錯吧，再來看看前面讓我們失望的Chrome瀏覽器：

嘿嘿，也是不錯，希望就在眼前，看看IE新生主力軍IE8下的表現：

再來看看對inline-block屬性不支持的IE7瀏覽器：

您可以狠狠地點擊這里：letter-spacing去除間隙空格

結果讓人心里咯噔了一下，暈那，好像沒有作用誒！不會啊，我很清楚的記得即使IE6/7瀏覽器也是支持letter-spacing去空格的。后來我仔細對比，發現這里的letter-spacing:-4px是有所用的，只是默認的空格間隙比較大，所以，即使舍去4像素間距，還是有一段空白內容。但是，我清楚的記得在Arial字體下，空格間距應該是兼容的，為何這里就IE6/IE7瀏覽器下不一樣呢？后來，我反復測試，終于發現了一個第一次看到的bug，“冒號影響了空格間隙的水平大小”。現將“效果：”這個小標題后面的中文冒號還成英文的，結果，空格間距一下子兼容了，真是很神奇，我不得不佩服IE6/7瀏覽器的怪異指數。

您可以狠狠地點擊這里：IE6/7下冒號英文化后間隙demo

IE6/7瀏覽器本身就是個怪胎，喜歡不走尋常路。在這兩個瀏覽器下，block水平的元素inline-block化之后，會直接忽略換行符的間隙。所以，這里還有一點點疑慮沒有解決。既然IE6/7瀏覽器div,li 這些標簽inline-block化后沒有空格間隙，那么使用letter-spacing負值會不會讓列表元素水平重疊呢？啊，這個問題就不要擔心了，如果元素間本身沒有空格，使用letter-spacing屬性是不會發生水平重疊的問題的。例如下面的測試代碼：

<div style="letter-spacing:-4px;">    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="border-right:4px solid #066;" /><img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" style="border-left:4px solid #F36;" /></div>

結果如下圖：

也就是說，如果元素間本身就沒有間隔，無論letter-spacing的值多小，元素都不會重疊。但是，如果有空格間隙存在，letter-spacing會發生重疊的。所以，我們無需為IE6/7元素會不會重疊這個問題擔心了。

您可以狠狠地點擊這里：letter-spacing與無間隙重疊demo

六、順著letter-spacing屬性走更遠些

按照我自己淺薄的經驗開看，換行符產生的空格與按一下space鍵的作用是一樣的。此空格所撐開的水平距離受空格字符所在環境的字體以及字體影響。由于不同的網站使用的字體不一樣，所以，在借助letter-spacing屬性實現列表布局時的letter-spacing的取值可能就不一樣，所以，我專門研究了下空格水平間距與字體/字體大小之間的關系，以及兼容性等，整理在下面的表格中了，希望能對您有所幫助，要是發現不準確之處歡迎指正：

letter-spacing與字體大小/字體關系的數據表

create by zhangxinxu 2010-11-03

您可以狠狠地點擊這里：letter-spacing/空格間隙/字體/字體大小關系測試demo

可以看到，基本上所有的瀏覽器對于不同字體下的空格符的水平占據的解析都是一致，唯一有瑕疵的是在Opera瀏覽器下，兩個inline-block元素間空白間隙使用letter-spacing去除的極限是1像素，當看上去要正好為0的時候，letter-spacing似乎失效，空白間距恢復成letter-spacing:0時的效果。

ok，現在我們把上面嘮嘮叨叨的些東西提煉整理一下，有如下一些結論：
block水平的元素inline-block化后，IE6/7沒有換行符間隙問題，其他瀏覽器均有；
inline水平的元素inline-block后，所有主流瀏覽器都有換行符/空格間隙問題；
font-size:0，去除換行符間隙，在IE6/7下殘留1像素間隙，Chrome瀏覽器無效，其他瀏覽器都完美去除；
letter-spacing負值可以去除所有瀏覽器的換行符間隙，但是，Opera瀏覽器下極限是間隙1像素，0像素會反彈，換行符間隙還原。

為什么袁隆平的水稻牛逼啊，就是因為是雜交的。這也是不宜近親結婚之道，雜交可以產生彪悍的下一代。這個原理同樣適用于CSS，雖然font-size:0有缺陷，letter-spacing負值也有不足，但是一旦將它們強制交配，哦呵呵，互補與整合，換行符間隙問題迎刃而解。如下測試代碼（環境字體大小84%，字體Arial）：

<div style="letter-spacing:-3px; font-size:0;">    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="border-right:4px solid #066;" />    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" style="border-left:4px solid #F36;" /></div>

結果不支持font-size:0去間隙的Chrome瀏覽器：

letter-spacing無法實現完全去間隙的Opera瀏覽器：

您可以狠狠地點擊這里：font-size:0，letter-spacing負值雜交demo

如果您使用的是IE6/7瀏覽器，可能會看到圖片重疊了2像素，這是1像素文字間隙-3像素letter-spacing值的結果。但是，實際情況下，列表元素都是從block元素inline-block化的，元素間本身就沒有間隙的，所以，就不會有重疊的問題了。

所以，應用display:inline-block屬性實現列表布局的幾個關鍵字就是：block水平的標簽，font-size:0和letter-spacing負值。

下面就將通過實例展現基于display:inline-block的列表布局。

七、基于display:inline-block的列表布局

本部分主要是實例展示，我比較喜歡順手找素材做實例，而新浪微博又是我常常掛著的，所以，沒有惡意的，又拿新浪微博做示例了。
目前新浪微博右側的人氣用戶推薦列表是采用浮動布局的，現在，采用inline-block布局實現同樣的，但是高度可不宜的布局：

您可以狠狠地點擊這里：inline-block布局和浮動布局對比實例頁面

下為效果截圖：

頁面的上面列表采用的是目前新浪微博的原CSS代碼，而下面的列表就是使用的inline-block列表布局。相比前面的浮動布局，不必擔心每個列表高度不一的問題，所以用戶的姓名可以完整顯示，這可比直接裁掉要好些。

demo頁面中默認加載會有兩條參考線，是由于應用了我自己寫的jQuery標尺參考線插件，您有興趣可以狠狠地點擊這里：網頁制作輔助工具-jQuery標尺參考線插件

此插件會產生透明遮罩層，所以，你用firebug看代碼的時候不能準確找到目標元素，此時只要按下”ESC”快捷鍵就可以隱藏標尺與參考線了。如果要想顯示標尺，按下快捷鍵”R”即可，具體使用還是參見上面給出的文章鏈接。

顯示兩條參考線是用來說明，使用inline-block列表布局是沒有兼容性問題的，可以達到與float布局一樣的像素級無差異布局。

此例子中，文字大小為12像素，字體環境為Arial字體，對照上面的letter-spacing間隙數據表可知，這里的letter-spacing值應該是-3像素，于是……

其實人人網上就已經應用了基于display:inline-block的列表布局，您可以去看人人網的分享頁面，其熱門分享視頻列表就是采用的基于display:inline-block的列表布局，但是其布局僅僅采用了letter-spacing負值，這也就意味著在Opera瀏覽器下，此列表是有兼容性問題的，如下面在Opera 10上的截圖：

其他瀏覽器列表間距是12像素，而Opera下卻是15像素，這是Opera瀏覽器letter-spacing負值反彈結果。但是，考慮到國情：Opera用戶寥寥無幾，所以，此不兼容性問題的影響也甚小。所以，您如果也不把Opera瀏覽器放在考慮范圍內，使用inline-block列表布局時只要一個輔助CSS letter-spacing就可以了，如果顧慮到Opera，則不要忘了font-size:0;

八、更進一步：更加靈活的inline-block列表布局

如果你以為基于display:inline-block的列表布局的優點僅僅在于可以讓列表元素不等高，那你就大錯特錯了。

在IE6/7下，inline水平標簽inline-block化后與純正的inline-block元素的作用就像是一個模子里出來的，這種“兼容性”可以很好地發揮inline-block列表布局的潛力。例如，使用white-space:nowrap;屬性可以讓列表不換行，你是否想到了列表元素的水平滾動切換？

使用text-align:justify可以實現自動等寬水平排列的列表布局，而且是兩端對齊的，不需要計算寬度，一切都是瀏覽器自動的，很方便很強大。尤其在自適應布局中，大顯身手，大放光彩。就以此舉個簡單的例子吧，如下CSS代碼：

.box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;}.list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}

如下HTML代碼：

<div class="box">    <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />哇哦，美女，口水，鼻血~~~</span>    <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />哇哦，美女，口水，鼻血，不行了，我的小兔亂撞~~</span>    .    .    .</div>

效果參見下面的視頻（錄制的是改變瀏覽器寬度時的效果）：
 

從視頻中可以看出，當瀏覽器寬度改變時，只要列表元素滿行，inline-block化的列表都是等寬且兩端對齊排列的，您可以狠狠地點擊這里：列表自動兩端對齊排列demo

IE6/7下inline水平的元素模仿inline-block屬性就算再像還是模仿，MJ還是MJ，小月月依舊是小月月，所以IE6/7下，像是text-justify兩端對齊還是比較脆弱的，像是一不留神的標簽，或是換行符都會導致失效，遠不如純正的inline-block屬性來得威武與堅挺。

九、啊，終于，結語

固定布局還是流體布局，本身網頁重構的思想決定了該使用哪種列表布局方式。像我，就是個流體布局控，所以，我會直接揮揮手，跟浮動列表布局說拜拜的，翻譯成日語就是：賽有拉拉！

本文僅是展示，如果您對浮動列表布局有些依依不舍的情懷，我會當大街上看到情侶打kiss一樣，因為親的又不是我女朋友（雖然沒有），所以關我鳥事，你隨意。好了，寫了已經夠多了，一些調侃的話就不說了。最后，畢竟資質有限，文中難免有表述不當的地方，歡迎指正，感謝閱讀，就這些。

原創文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com/]