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