標準W3C盒子模型和IE盒子模型CSS佈局經典盒子模型

時間 2019-11-08

標籤標準 w3c 盒子模型 css 佈局經典欄目 C&C++ 简体版

原文原文鏈接

盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看咱們熟知的標準盒子模型： javascript

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

　　ie 盒子模型 html

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

　　例：一個盒子的 margin 爲 20px，border 爲 1px，padding 爲 10px，content 的寬爲 200px、高爲 50px。 jquery

假如用標準 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 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。瀏覽器

　　再用 jquery 作的例子來證明一下。 spa

　　代碼1： code

<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>

上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示「ie盒子模型」，在 ff 瀏覽器中顯示「標準 w3c 盒子模型」。 htm

　　代碼2： blog

<!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 盒子模型。