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

web前端如何讓網頁布局穩定性和標準性?

因此再這裡，傳智播客老師給大家列出網頁布局標準性、合理性和相容性的一些方法，希望對剛開始學習css的同學有所幫助。

位於文件的最前面，用於向瀏覽器說明當前文件使用哪種 html 或 xhtml 標準規範，我們必需在開頭處使用標記為所有的xhtml文件指定xhtml版本和型別，只有這樣瀏覽器才能將該網頁作為有效的xhtml文件，並按指定的文件型別進行解析。

標記和瀏覽器的相容性相關，刪除，就是把如何展示html頁面的權利交給瀏覽器，這時，ie6，ie7，ie8，firefox2，firefox3，chrome，有多少種瀏覽器，頁面就有可能有多少中顯示效果，這是不被允許的。

物盡其用人盡其才。再合適的地方用到合理的標籤，對網頁布局和優化都有很多的好處，比如logo ，一般我們都用h1 標籤包括。還有理解行內元素和塊級元素的區別。

乙個頁面不要只用div，太多反而太氾濫了。table雖然用的少，但是，再做一些資料處理的時候，還是比較好用的。

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

因此，再這裡我們會根據穩定性來看這三者的先後順序：

其中穩定性最好的就是盒子本身的高度和寬度了，我們優先考慮這個。因此，很多情況下，我們會考慮利用高度剩餘法，寬度剩餘法來做，而不是padding和margin。

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

其次，我們才考慮padding ，因為padding也可以看做特殊的盒子高度和寬度，最後我們再用margin來做。因為margin會有邊距合併的問題。

標準流再裡面是最穩定的，就是塊級元素上下顯示，行內一行顯示，都是最穩定的。

浮動和定位都「脫標」了，穩定性沒那麼穩定，所以，我們應該遵循如下原則：

頁面布局，能用標準流去做的不用浮動去做，如果要用浮動做的，就不用定位去做。

總會有特殊的瀏覽器，比如ie6 ，這些奇葩瀏覽器總是有自己獨到的地方，那我們怎辦? 兵法雲，知己知彼百戰百勝，因此，需要我們詳細的了解這些瀏覽器自己獨特的特性，或者掌握他們ie6常常出現的bug，以及對於css 的理解，那麼我們根據他們的不同解析，寫出合理的布局。

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img

這句話，大家都知道，清除瀏覽器樣式的。但是如果你不加，不同瀏覽器肯定顯示不太一樣。所以，css的第一句話就是它。還有就是要使用大部分瀏覽支援的css屬性不至於引起不必要的麻煩。