建站
咨詢
售后
建站咨詢
新聞中心
本節(jié)和大家一起學習一下跨瀏覽器兼容的CSS編碼準則，瀏覽器越來越多，也就意味著做web前端開發(fā)的就越困難，以前講的用CSShack來也不是一件容易的事，用過多的CSShack來兼容也會出現(xiàn)許多臃腫的代碼；所以掌握一些跨瀏覽器兼容的CSS編碼準則是非常有必要的。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、做網(wǎng)站、貴池網(wǎng)絡(luò)推廣、小程序制作、貴池網(wǎng)絡(luò)營銷、貴池企業(yè)策劃、貴池品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供貴池建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
跨瀏覽器兼容的CSS編碼準則
瀏覽器越來越多，也就意味著做web前端開發(fā)的就越困難。雖然現(xiàn)在的瀏覽器的內(nèi)核都同，但對于CSS的兼容也會有一定的差別！以前講的用CSShack來也不是一件容易的事，用過多的CSShack來兼容也會出現(xiàn)許多臃腫的代碼；所以掌握一些跨瀏覽器兼容的CSS編碼準則是非常有必要的。
CSS編碼準則第一：理解CSS盒子模型
透徹地理解CSS盒子模型是首要事情，CSS盒子模型并不難，且基本支持所有瀏覽器，除了某些特定條件下的IE瀏覽器。
CSS盒子模型負責處理以下事情：
◆一個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對象#p#
CSS編碼準則第三：理解Floating和Clearing屬性
實現(xiàn)多欄排版的最好方法是使用float屬性，float也是一個將使你受益匪淺的屬性。一個float對象可以居左或居右，一個設(shè)置為float的對象，將根據(jù)設(shè)置的方向，左移或右移到其父容器的邊界，或其前面的float對象的邊界，而緊隨其后的非float對象或內(nèi)容，則包圍在其相反的方向。
以下是使用float和clear屬性的一些重要準則：
◆一個float對象，將從其置身的block級非float內(nèi)容流中跳出，換句話說，如果你要將一個box向左邊f(xié)loat，它后面的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不起作用
CSS編碼準則第四：永遠不要指望在所有瀏覽器中都一模一樣
在不同瀏覽器實現(xiàn)相同的體驗個功能是可能的，實現(xiàn)近似像素級的一致外觀也是可能的，但永遠不要指望一模一樣，要知足常樂喲！
名稱欄目：跨瀏覽器兼容的四大CSS編碼準則
URL分享：http://m.5511xx.com/article/ccehsos.html
