DIV+CSS兩種盒子模型

明天網(wǎng)吧 2014-10-10

展開(kāi)全文

http://blog.csdn.net/mylovestart/article/details/8607202

利用CSS來(lái)布局頁(yè)面布局DIV有點(diǎn)邏輯性!
重點(diǎn)理解盒子模型,標(biāo)準(zhǔn)流和非標(biāo)準(zhǔn)流的區(qū)別,還有定位原理!把這3個(gè)攻破了,就非常簡(jiǎn)單了!多實(shí)踐多參考!
最后就是兼容問(wèn)題了,在實(shí)踐中自然就有經(jīng)驗(yàn)了!這些兼容技巧都是經(jīng)驗(yàn)來(lái)的!

盒子模型有兩種，分別是 IE 盒子模型和標(biāo)準(zhǔn) W3C 盒子模型。他們對(duì)盒子模型的解釋各不相同，

先來(lái)看看我們熟悉的標(biāo)準(zhǔn)盒子模型：

　　圖片看不清楚？請(qǐng)點(diǎn)擊這里查看原圖（大圖）。

　　從上圖可以看到標(biāo)準(zhǔn) W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。　

　　圖片看不清楚？請(qǐng)點(diǎn)擊這里查看原圖（大圖）。

　　從上圖可以看到 IE 盒子模型的范圍也包括 margin、border、padding、content，和標(biāo)準(zhǔn) W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

　　例：一個(gè)盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，如果用標(biāo)準(zhǔn) W3C 盒子模型解釋?zhuān)敲催@個(gè)盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實(shí)際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；如果用IE 盒子模型，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實(shí)際大小為：寬 200px、高 50px。

　　那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn) W3C 盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn) W3C 盒子模型”呢？很簡(jiǎn)單，就是在網(wǎng)頁(yè)的頂部加上 DOCTYPE 聲明。如果不加 DOCTYPE 聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè)，即 IE 瀏覽器會(huì)采用 IE 盒子模型去解釋你的盒子，而 FF 會(huì)采用標(biāo)準(zhǔn) W3C 盒子模型解釋你的盒子，所以網(wǎng)頁(yè)在不同的瀏覽器中就顯示的不一樣了。反之，如果加上了 DOCTYPE 聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn) W3C 盒子模型去解釋你的盒子，網(wǎng)頁(yè)就能在各個(gè)瀏覽器中顯示一致了。

　　再用 jQuery 做的例子來(lái)證實(shí)一下。

　　代碼1：

<html> <head> <title>你用的盒子模型是？</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sBox = $.boxModel ? "標(biāo)準(zhǔn)W3C":"IE"; document.write("您的頁(yè)面目前支持："+sBox+"盒子模型"); </script> </head> <body> </body> </html>

　　上面的代碼沒(méi)有加上 DOCTYPE 聲明，在 IE 瀏覽器中顯示“IE盒子模型”，在 FF 瀏覽器中顯示“標(biāo)準(zhǔn) W3C 盒子模型”。

　　代碼2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>你用的盒子模型是標(biāo)準(zhǔn)W3C盒子模型</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sBox = $.boxModel ? "標(biāo)準(zhǔn)W3C":"IE"; document.write("您的頁(yè)面目前支持："+sBox+"盒子模型"); </script> </head> <body> </body> </html>

　　代碼2 與代碼1 唯一的不同的就是頂部加了 DOCTYPE 聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn) W3C 盒子模型”。

　　所以為了讓網(wǎng)頁(yè)能兼容各個(gè)瀏覽器，讓我們用標(biāo)準(zhǔn) W3C 盒子模型

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀(guān)點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：明天網(wǎng)吧 > 《html》

舉報(bào)/認(rèn)領(lǐng)