一，什么是CSS盒模型？
CSS盒模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
形象的來說，一張網頁就像一個衣柜那樣，由一個又一個“方框盒子”組成：
衣柜
網頁
而這中間的每一個盒子都是盒模型，它們組成一個大的盒模型（網頁），而降到盒模型就不能不提塊級元素和行內元素。
二，塊級元素和行內元素
- 什么是塊級元素和行內元素
1.塊級元素：塊級元素全稱block level element，它是指在網頁中內容文本無論多少都能單獨占領一行的元素，如下圖：
塊級元素
2.行內元素：行內元素全稱inline element，它是指在網中內容文本如果不能占據超過整個父容器寬度則不會完全占據一行的元素，如下圖：
行內元素
- 塊級元素和行內元素有哪些？
1.塊級元素：<div>，<h1~h6>，<p>，<form>，<ul>，<ol>，<dl>，<dt>，<dd>，<li>，<table>，<tr>，<td>，<th>，<pre>等；
2.行內元素：<span>，<strong>，<em>，<a>，<img>，<br>，<button>，<input>，<label>，<select>，<textarea>，<code>，<script>等； - 塊級元素和行內元素的區別
1.塊級元素可以包含文本，塊級，行內元素，而行內元素只能包含文本和行內元素；
2.塊級元素單獨占據一整行，行內元素占據的位置只有自身文本寬度的空間；
3.塊級元素可以設置寬高，行內元素設置寬高無效；
4.塊級元素的padding，margin值設置有效，行內元素padding，margin上下的值設置無效，但左右有效；
三，一個盒子的組成
在盒模型中，一個盒子由content，padding，border和margin組成的，它們的直觀是這樣的：
盒模型成分
其中，最外層是margin，它是盒子的外邊距，有四個值，分別是上右下左，里面一層是border，它是盒子的邊框，也是上右下左四個值，往下面的是padding，它是盒子的內邊距，也有上右下左四個值，最里面一層是content區域，也就是文本內容展示的區域。
- margin：盒子外邊距，margin屬性有四個值，分別對應盒子的上右下左外邊距，可以寫成下面這樣：
margin的值
我們也可以采用縮寫的方式，如下：
縮寫1
縮寫2
- border：
1.盒子的邊框，有四個值，分別對應盒子的上右下左border，寫法如下：
boder的值
它的縮寫和margin一樣。
2.border的其它常用屬性有：
border-style邊框樣式，border-width邊框粗度，border-color邊框顏色，通常我們會縮寫為：
多個樣式縮寫
3.border-radius：邊框半徑，border-radius 屬性是一個簡寫屬性，它有四個值，分別對應邊框的四個角，
順序是左上，右上，右下，左下，如下圖：
border-radius將邊框角變圓
- padding：盒子內邊距，padding屬性有四個值，分別對應盒子的上右下左內邊距，可以寫成下面這樣：
padd寫法
padding縮寫和margin一樣。
- content：文本內容區域，可以用width和height設置該區域的大小；
四，展示一個完整的盒子結構
- content
藍色文本區域為content區
- padding，border
綠色是padding區域，紅色區域是border
- margin
黃色是margin區域
五，W3C盒模型與IE盒模型的區別(參考知識點-IE 盒模型 vs 標準盒模型)
IE盒模型
IE盒模型是指在ie678怪異模式（不添加 doctype）下使用 ie 盒模型，寬度=邊框+padding+內容寬度w3c盒模型（標準盒模型）
chrome， ie9+, ie678(添加 doctype) 使用標準盒模型他們的區別
首先來看一張圖
w3c盒模型與ie盒模型
PS：兩種盒模型的寬度計算是不一樣的；
1.IE盒模型的寬度計算：寬度=邊框+padding+內容寬度；
2.w3c盒模型的寬度計算：寬度= 內容寬度；
