|
瀏覽器越來(lái)越多，也就意味著做web前端開(kāi)發(fā)的就越困難。現(xiàn)在的瀏覽器的內(nèi)核都同，對(duì)于css的兼容也會(huì)有一定的差別！以前講的用css hack來(lái)也不是一件容易的事，用過(guò)多的css hack來(lái)兼容也會(huì)出現(xiàn)許多臃腫的代碼；所以掌握一些跨瀏覽器兼容的css編碼準(zhǔn)則是非常有必要的。
第一：理解css盒子模型（學(xué)習(xí)div+css布局也是很重要的，學(xué)會(huì)的css的盒子模型學(xué)習(xí)div+css也就不難了）
透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不難，且基本支持所有瀏覽器，除了某些特定條件下的 IE 瀏覽器。
CSS 盒子模型負(fù)責(zé)處理以下事情：
一個(gè) blcok （區(qū)塊）級(jí)對(duì)象占據(jù)多大的空間
該對(duì)象的邊界，留白
盒子的尺寸
盒子與頁(yè)面其它元素的相對(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ù)雜的坍塌問(wèn)題，導(dǎo)致布局問(wèn)題（比如兩個(gè)垂直毗鄰的 Block 對(duì)象，上面的對(duì)象的 bottom-margin 為 40，下面的對(duì)象的 top-margin 為 20，則兩個(gè)對(duì)象的間距將是 40，而不是 60 - 譯者）
擁有相對(duì)位置和絕對(duì)位置的對(duì)象，擁有不同的行為
 <CSS 盒子模型>
第二：理解block級(jí)和inline級(jí)對(duì)象的區(qū)別
Block級(jí)對(duì)象：
Block 級(jí)對(duì)象會(huì)自然地水平充滿其父容器，因此沒(méi)有必要為之設(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ì)向下探出的筆畫(huà)
一個(gè)設(shè)置為 float 的 inline 對(duì)象將變成 block 對(duì)象
第三：理解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)容流中跳出，換句話說(shuō)，如果你要將一個(gè) box 向左邊 float，它后面的 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ì)象，如果沒(méi)有設(shè)置寬度，則會(huì)自動(dòng)縮成其包含的內(nèi)容的寬度，因此最好為 float 對(duì)象明確設(shè)置寬度
如果一個(gè) block 對(duì)象包含 float 子對(duì)象，會(huì)出現(xiàn)本文中闡述的問(wèn)題。
一個(gè)設(shè)置了 clear 屬性的對(duì)象，將不會(huì)包圍其前面的 float 對(duì)象
一個(gè)既設(shè)置了 clear 又設(shè)置了 float 屬性的對(duì)象，只有 clear:left 屬性生效，clear:right 不起作用
第四：永遠(yuǎn)不要指望在所有瀏覽器中都一模一樣
在不同瀏覽器實(shí)現(xiàn)相同的體驗(yàn)個(gè)功能是可能的，實(shí)現(xiàn)近似像素級(jí)的一致外觀也是可能的，但永遠(yuǎn)不要指望一模一樣，要知足常樂(lè)喲！
文章轉(zhuǎn)載自網(wǎng)管之家：http://www./school/HTMLCSS/201007/188564.html
|
|
|
來(lái)自： 昵稱166827 > 《我的圖書(shū)館》
