剛開(kāi)始學(xué)css+div布局的同學(xué)們，都比較困惑和難寫的就是兼容性的問(wèn)題了，特別是ie6等低版本的瀏覽器，隨意國(guó)內(nèi)逐步慢慢消失取代，但是現(xiàn)階段還是會(huì)有點(diǎn)考慮因素再里面。我們寫的網(wǎng)頁(yè)布局怎么樣才是合理的，完整的，兼容性好的呢？因此再這里，杭州網(wǎng)站設(shè)計(jì)公司盤網(wǎng)網(wǎng)絡(luò)給大家列出網(wǎng)頁(yè)布局標(biāo)準(zhǔn)性、合理性和兼容性的一些方法，希望對(duì)剛開(kāi)始學(xué)習(xí)css的同學(xué)有所幫助。一、<!DOCTYPE> 標(biāo)記的重要性。位 于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn) 規(guī)范，我們必需在開(kāi)頭處使用<!DOCTYPE>標(biāo)記為 所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能將該網(wǎng)頁(yè)作為有 效的XHTML文檔，并按指定的文檔類型進(jìn)行解析。 <!DOCTYPE> 標(biāo)記和瀏覽器的兼容性相關(guān)，刪除<!DOCTYPE>，就是把如何展示HTML頁(yè)面的權(quán)利交給瀏覽器， 這 時(shí)，IE6，IE7，IE8，F(xiàn)irefox2，F(xiàn)irefox3，Chrome，有多少種瀏覽器，頁(yè)面就有可能有多少中顯示效果，這是不被允許的。 二、合適地方用到合適的標(biāo)簽物盡其用人盡其才。 再合適的地方用到合理的標(biāo)簽，對(duì)網(wǎng)頁(yè)布局和優(yōu)化都有很多的好處，比如logo ，一般我們都用h1 標(biāo)簽包括。 還有理解行內(nèi)元素和塊級(jí)元素的區(qū)別。 一個(gè)頁(yè)面不要只用div，太多反而太泛濫了。table雖然用的少，但是，再做一些數(shù)據(jù)處理的時(shí)候，還是比較好用的。比如下面的，肯定用列表ul了。 三、站在標(biāo)準(zhǔn)流的角度看padding 和 maring 、width等屬性穩(wěn)定性我們知道頁(yè)面布局的時(shí)候，控制盒子位置距離等，有盒子本身大小，padding和margin來(lái)做。 先看如下圖，再火狐的firebug中看他們?nèi)叩娘@示。 因此，再這里我們會(huì)根據(jù)穩(wěn)定性來(lái)看這三者的先后順序： 其中穩(wěn)定性最好的就是盒子本身的高度和寬度了，我們優(yōu)先考慮這個(gè)。 因此，很多情況下，我們會(huì)考慮利用高度剩余法，寬度剩余法來(lái)做，而不是padding和margin。 比如下圖： 這個(gè)評(píng)論和 下面的文本域框有個(gè)小距離， 此時(shí)，我們給這個(gè)評(píng)論一個(gè)h2標(biāo)簽，高度正好從評(píng)論上方，到文本域上的高度就好了，如圖黃色部分所示。 h2 里面文字內(nèi)容默認(rèn)是靠左上對(duì)齊的，高度用不了，就剩下了，這就是高度剩余法。 其次，我們才考慮padding ，因?yàn)閜adding也可以看做特殊的盒子高度和寬度，最后我們?cè)儆胢argin來(lái)做。因?yàn)閙argin會(huì)有邊距合并的問(wèn)題。 四、標(biāo)準(zhǔn)流、浮動(dòng)流和定位的穩(wěn)定性標(biāo)準(zhǔn)流再里面是最穩(wěn)定的，就是塊級(jí)元素上下顯示，行內(nèi)一行顯示，都是最穩(wěn)定的。 浮動(dòng)和定位都“脫標(biāo)”了，穩(wěn)定性沒(méi)那么穩(wěn)定，所以，我們應(yīng)該遵循如下原則： 頁(yè)面布局，能用標(biāo)準(zhǔn)流去做的不用浮動(dòng)去做，如果要用浮動(dòng)做的，就不用定位去做。五、知己知彼百戰(zhàn)百勝總會(huì)有特殊的瀏覽器，比如ie6 ，這些奇葩瀏覽器總是有自己獨(dú)到的地方，那我們?cè)蹀k？ 兵法云，知己知彼百戰(zhàn)百勝，因此，需要我們?cè)敿?xì)的了解這些瀏覽器自己獨(dú)特的特性，或者掌握他們IE6常常出現(xiàn)的bug，以及對(duì)于css 的理解，那么我們根據(jù)他們的不同解析，寫出合理的布局。六、不要讓清除內(nèi)外邊距帶來(lái)麻煩html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } 這句話，大家都知道，清除瀏覽器樣式的。但是如果你不加，不同瀏覽器肯定顯示不太一樣。所以，css的第一句話就是它。還有就是要使用大部分瀏覽支持的css屬性不至于引起不必要的麻煩。
