一、盒子模型
標准盒子模型
從下圖可以看到標准 w3c 盒子模型的范圍包括 content、padding、border、margin，並且 content 部分不包含其他部分。
怪異盒子模型
從下圖可以看到 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 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
<!doctype html>
<html>
<head>
<title>你用的盒子模型是標准w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
var sbox = $.boxmodel ? "標准w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。
content-box，border和padding不計算入width之內
padding-box，padding計算入width內
border-box，border和padding計算入width之內，其實就是怪異模式了~
<style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; } </style>
二、組成盒子模型的標簽類型
在CSS中，html中的標簽元素大體被分為三種不同的類型：塊級元素、行級元素和行內塊元素。
常用的塊級元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul> 設置display:block轉換
特征：1.一個塊級元素獨占一行；
2.元素的高度、寬度、行高以及頂和底邊距都可設置；
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
常用的行級元素有：
<a>、<span> 設置display:inline轉換
特征：1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
4、內聯元素之間的間距問題：當行內元素之間有“回車”、“tab”、“空格”時就會出現間隙。解決方法：寫在一行，之間不要有空格之類的符號。
常用的行內塊元素有：
<img>、<input> 設置display:inline-block轉換
特點：1、和其他元素都在一行上；（而塊狀元素是另起一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。