web前端如何讓網頁佈局穩定性和標準性？

剛開始學css+div佈局的同窗們，都比較困惑和難寫的就是兼容性的問題了，特別是ie6等低版本的瀏覽器，隨意國內逐步慢慢消失取代，可是現階段仍是會有點考慮因素再裏面。咱們寫的網頁佈局怎麼樣纔是合理的，完整的，兼容性好的呢？
所以再這裏，小強老師給你們列出網頁佈局標準性、合理性和兼容性的一些方法，但願對剛開始學習css的同窗有所幫助。

1、<!DOCTYPE> 標記的重要性。

位 於文檔的最前面，用於向瀏覽器說明當前文檔使用哪一種 HTML 或 XHTML 標準 規範，咱們必需在開頭處使用<!DOCTYPE>標記爲 全部的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能將該網頁做爲有 效的XHTML文檔，並按指定的文檔類型進行解析。
<!DOCTYPE> 標記和瀏覽器的兼容性相關，刪除<!DOCTYPE>，就是把如何展現HTML頁面的權利交給瀏覽器， 這 時，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少種瀏覽器，頁面就有可能有多少中顯示效果，這是不被容許的。

2、合適地方用到合適的標籤

物盡其用人盡其才。 再合適的地方用到合理的標籤，對網頁佈局和優化都有不少的好處，好比logo ，通常咱們都用h1 標籤包括。 還有理解行內元素和塊級元素的區別。

一個頁面不要只用div，太多反而太氾濫了。table雖然用的少，可是，再作一些數據處理的時候，仍是比較好用的。好比下面的，確定用列表ul了。

3、站在標準流的角度看padding 和 maring 、width等屬性穩定性

咱們知道頁面佈局的時候，控制盒子位置距離等，有盒子自己大小，padding和margin來作。
先看以下圖，再火狐的firebug中看他們三者的顯示。


所以，再這裏咱們會根據穩定性來看這三者的前後順序：
其中穩定性最好的就是盒子自己的高度和寬度了，咱們優先考慮這個。 所以，不少狀況下，咱們會考慮利用高度剩餘法，寬度剩餘法來作，而不是padding和margin。
好比下圖：

這個評論和 下面的文本域框有個小距離， 此時，咱們給這個評論一個h2標籤，高度正好從評論上方，到文本域上的高度就行了，如圖黃色部分所示。


h2 裏面文字內容默認是靠左上對齊的，高度用不了，就剩下了，這就是高度剩餘法。

其次，咱們才考慮padding ，由於padding也能夠看作特殊的盒子高度和寬度，最後咱們再用margin來作。由於margin會有邊距合併的問題。

4、標準流、浮動流和定位的穩定性

標準流再裏面是最穩定的，就是塊級元素上下顯示，行內一行顯示，都是最穩定的。
浮動和定位都「脫標」了，穩定性沒那麼穩定，因此，咱們應該遵循以下原則：
頁面佈局，能用標準流去作的不用浮動去作，若是要用浮動作的，就不用定位去作。

5、知己知彼百戰百勝

總會有特殊的瀏覽器，好比ie6 ，這些奇葩瀏覽器老是有本身獨到的地方，那咱們怎辦？ 兵法雲，知己知彼百戰百勝，所以，須要咱們詳細的瞭解這些瀏覽器本身獨特的特性，或者掌握他們IE6經常出現的bug，以及對於css 的理解，那麼咱們根據他們的不一樣解析，寫出合理的佈局。

6、不要讓清除內外邊距帶來麻煩

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屬性不至於引發沒必要要的麻煩。

以上幾點，是小強老師，給你們總結的幾點，但願對新學習的同窗有所幫助。

小強零零壹 和你們一塊兒分享