教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

web前端開發(fā)培訓(xùn)之如何讓網(wǎng)頁布局穩(wěn)定性和標(biāo)準(zhǔn)性?

更新時(shí)間:2016年09月29日16時(shí)58分 來源:傳智播客 瀏覽次數(shù):

剛開始學(xué)css+div布局的同學(xué)們,都比較困惑和難寫的就是兼容性的問題了,特別是ie6等低版本的瀏覽器,隨意國內(nèi)逐步慢慢消失取代,但是現(xiàn)階段還是會(huì)有點(diǎn)考慮因素再里面。我們寫的網(wǎng)頁布局怎么樣才是合理的,完整的,兼容性好的呢?


因此再這里,傳智播客老師給大家列出網(wǎng)頁布局標(biāo)準(zhǔn)性、合理性和兼容性的一些方法,希望對(duì)剛開始學(xué)習(xí)css的同學(xué)有所幫助。


一、 標(biāo)記的重要性。


位 于文檔的最前面,用于向?yàn)g覽器說明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范,我們必需在開頭處使用標(biāo)記為 所有的XHTML文檔指定XHTML版本和類型,只有這樣瀏覽器才能將該網(wǎng)頁作為有效的XHTML文檔,并按指定的文檔類型進(jìn)行解析。


標(biāo)記和瀏覽器的兼容性相關(guān),刪除,就是把如何展示HTML頁面的權(quán)利交給瀏覽器,這 時(shí),IE6,IE7,IE8,F(xiàn)irefox2,F(xiàn)irefox3,Chrome,有多少種瀏覽器,頁面就有可能有多少中顯示效果,這是不被允許的。


二、合適地方用到合適的標(biāo)簽


物盡其用人盡其才。 再合適的地方用到合理的標(biāo)簽,對(duì)網(wǎng)頁布局和優(yōu)化都有很多的好處,比如logo ,一般我們都用h1 標(biāo)簽包括。 還有理解行內(nèi)元素和塊級(jí)元素的區(qū)別。


一個(gè)頁面不要只用div,太多反而太泛濫了。table雖然用的少,但是,再做一些數(shù)據(jù)處理的時(shí)候,還是比較好用的。


三、站在標(biāo)準(zhǔn)流的角度看padding 和 maring 、width等屬性穩(wěn)定性


我們知道頁面布局的時(shí)候,控制盒子位置距離等,有盒子本身大小,padding和margin來做。



因此,再這里我們會(huì)根據(jù)穩(wěn)定性來看這三者的先后順序:


其中穩(wěn)定性最好的就是盒子本身的高度和寬度了,我們優(yōu)先考慮這個(gè)。 因此,很多情況下,我們會(huì)考慮利用高度剩余法,寬度剩余法來做,而不是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也可以看做特殊的盒子高度和寬度,最后我們再用margin來做。因?yàn)閙argin會(huì)有邊距合并的問題。


四、標(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)定性沒那么穩(wěn)定,所以,我們應(yīng)該遵循如下原則:


頁面布局,能用標(biāo)準(zhǔn)流去做的不用浮動(dòng)去做,如果要用浮動(dòng)做的,就不用定位去做。


五、知己知彼百戰(zhàn)百勝


總會(huì)有特殊的瀏覽器,比如ie6 ,這些奇葩瀏覽器總是有自己獨(dú)到的地方,那我們怎辦? 兵法云,知己知彼百戰(zhàn)百勝,因此,需要我們詳細(xì)的了解這些瀏覽器自己獨(dú)特的特性,或者掌握他們ie6常常出現(xiàn)的bug,以及對(duì)于css 的理解,那么我們根據(jù)他們的不同解析,寫出合理的布局。


六、不要讓清除內(nè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屬性不至于引起不必要的麻煩。


以上幾點(diǎn),是傳智播客老師,給大家總結(jié)的幾點(diǎn),希望對(duì)新學(xué)習(xí)的同學(xué)有所幫助。


0 分享到:
和我們在線交談!