IE、W3C兩種CSS盒子模型

時間 2019-11-18

標籤 w3c 兩種 css 盒子模型欄目 C&C++ 简体版

原文原文鏈接

利用CSS來佈局頁面佈局DIV有點邏輯性!
重點理解盒子模型,標準流和非標準流的區別,還有定位原理!把這3個攻破了,就很是簡單了!多實踐多參考!
最後就是兼容問題了,在實踐中天然就有經驗了!這些兼容技巧都是經驗來的!javascript

盒子模型有兩種，分別是 IE 盒子模型和標準 W3C 盒子模型。他們對盒子模型的解釋各不相同，html

先來看看咱們熟悉的標準盒子模型：java

　　從上圖能夠看到標準 W3C 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分。　jquery

　　從上圖能夠看到 IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 pading。瀏覽器

　　例：一個盒子的 margin 爲 20px，border 爲 1px，padding 爲 10px，content 的寬爲 200px、高爲 50px，若是用標準 W3C 盒子模型解釋，那麼這個盒子須要佔據的位置爲：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小爲：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；若是用IE 盒子模型，那麼這個盒子須要佔據的位置爲：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小爲：寬 200px、高 50px。佈局

　　那應該選擇哪中盒子模型呢？固然是「標準 W3C 盒子模型」了。怎麼樣纔算是選擇了「標準 W3C 盒子模型」呢？很簡單，就是在網頁的頂部加上 DOCTYPE 聲明。若是不加 DOCTYPE 聲明，那麼各個瀏覽器會根據本身的行爲去理解網頁，即 IE 瀏覽器會採用 IE 盒子模型去解釋你的盒子，而 FF 會採用標準 W3C 盒子模型解釋你的盒子，因此網頁在不一樣的瀏覽器中就顯示的不同了。反之，若是加上了 DOCTYPE 聲明，那麼全部瀏覽器都會採用標準 W3C 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。spa

　　再用 jQuery 作的例子來證明一下。code

　　代碼1：htm

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

　　上面的代碼沒有加上 DOCTYPE 聲明，在 IE 瀏覽器中顯示「IE盒子模型」，在 FF 瀏覽器中顯示「標準 W3C 盒子模型」。

　　代碼2：

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

　　代碼2 與代碼1 惟一的不一樣的就是頂部加了 DOCTYPE 聲明。在全部瀏覽器中都顯示「標準 W3C 盒子模型」。

　　因此爲了讓網頁能兼容各個瀏覽器，讓咱們用標準 W3C 盒子模型