瀏覽器越來越多，也就意味著做web前端開發(fā)的就越困難。現(xiàn)在的瀏覽器的內(nèi)核都同，對于css的兼容也會有一定的差別！以前講的用css hack來也不是一件容易的事，用過多的css hack來兼容也會出現(xiàn)許多臃腫的代碼；所以掌握一些跨瀏覽器兼容的css編碼準則是非常有必要的。
第一：理解css盒子模型（學(xué)習(xí)div+css布局也是很重要的，學(xué)會的css的盒子模型學(xué)習(xí)div+css也就不難了）
透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不難，且基本支持所有瀏覽器，除了某些特定條件下的 IE 瀏覽器。
CSS 盒子模型負責(zé)處理以下事情：
一個 blcok （區(qū)塊）級對象占據(jù)多大的空間
該對象的邊界，留白
盒子的尺寸
盒子與頁面其它元素的相對位置
CSS 盒子模型有以下準則：
Block （區(qū)塊）對象都是矩形 （事實上所有對象都如此）
其尺寸由 width， height， padding， borders， 以及 margins 決定
如果不設(shè)置高度，該盒子的高度將自動適應(yīng)其包含的內(nèi)容，加上留白等（除非使用了 float）
如果不設(shè)置寬度，一個非 float 型盒子水平上將充滿其父容器（扣除父容器的留白）
處理 block 級對象時，必須注意以下事項：
如果一個盒子的寬度設(shè)置為 100%，它就不能再設(shè)置 margins， padding， 和 borders，否則會撐破其父容器
垂直毗鄰的 margin 會引起復(fù)雜的坍塌問題，導(dǎo)致布局問題（比如兩個垂直毗鄰的 Block 對象，上面的對象的 bottom-margin 為 40，下面的對象的 top-margin 為 20，則兩個對象的間距將是 40，而不是 60 - 譯者）
擁有相對位置和絕對位置的對象，擁有不同的行為
<CSS 盒子模型>
第二：理解block級和inline級對象的區(qū)別
Block級對象：
Block 級對象會自然地水平充滿其父容器，因此沒有必要為之設(shè)置 100% 寬度屬性
Block 級對象的起始擺放位置是其父容器的左上邊界，并順排在其前面的兄弟 Block 對象的下方（除非設(shè)置 float 或絕對位置）
inline級對象
inline 級對象會忽略其寬度和高度設(shè)置
inline 級對象會隨著文字排版，并受排版屬性的影響（如 white-space， font-size， letter-spacing）
Inline 級對象可以使用 vertical-align 屬性控制其垂直對齊，block 級對象不可以
Inline 級對象的下方會保留一些自然的空間，以適應(yīng)字母 g 一類的會向下探出的筆畫
一個設(shè)置為 float 的 inline 對象將變成 block 對象
第三：理解Floating和Clearing屬性
實現(xiàn)多欄排版的最好方法是使用 float屬性，float 也是一個將使你受益匪淺的屬性。一個 float 對象可以居左或居右，一個設(shè)置為 float 的對象，將根據(jù)設(shè)置的方向，左移或右移到其父容器的邊界，或其前面的 float 對象的邊界，而緊隨其后的非 float 對象或內(nèi)容，則包圍在其相反的方向。
以下是使用 float 和 clear 屬性的一些重要準則：
一個 float 對象，將從其置身的 block 級非 float 內(nèi)容流中跳出，換句話說，如果你要將一個 box 向左邊 float，它后面的 block 級非 float 對象會顯示到下方，inline 級內(nèi)容會在旁邊包圍
要讓一段內(nèi)容從一側(cè)包圍一個 float 對象，這段內(nèi)容必須要么是 inline 級的，要么也設(shè)置為相同方向的 float
一個 float 對象，如果沒有設(shè)置寬度，則會自動縮成其包含的內(nèi)容的寬度，因此最好為 float 對象明確設(shè)置寬度
如果一個 block 對象包含 float 子對象，會出現(xiàn)本文中闡述的問題。
一個設(shè)置了 clear 屬性的對象，將不會包圍其前面的 float 對象
一個既設(shè)置了 clear 又設(shè)置了 float 屬性的對象，只有 clear:left 屬性生效，clear:right 不起作用
第四：永遠不要指望在所有瀏覽器中都一模一樣
在不同瀏覽器實現(xiàn)相同的體驗個功能是可能的，實現(xiàn)近似像素級的一致外觀也是可能的，但永遠不要指望一模一樣，要知足常樂喲！
