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