怎樣才算一個盒子？
頁面上的每個元素都可以看做一個盒子，但display為inline的内聯元素，寬高由内容決定，無法設定寬和高。
盒子最重要的5個屬性
- width：内容的寬度（不是盒子的寬度）
- height: 内容的高度（不是盒子的高度）
- padding：内邊距。
- border：邊框。
- margin：外邊距。
浏覽器給
<body>
預設的外邊距margin大小是8個像素
上面這個盒子，width:200px; height:200px; 但是真實占有的寬高是302*302。 這是因為還要加上padding、border。
CSS 盒模型 （标準盒模型）預設
标準盒子模型中，width 和 height 指的是内容區域的寬度和高度。增加内邊距、邊框和外邊距不會影響内容區域的尺寸，但是會增加元素框的總尺寸。
如果想保持一個盒子的真實占有寬度不變，那麼加width的時候就要減padding。加padding的時候就要減width。
background-color将填充所有border以内的區域。
一些元素，預設帶有
padding
，比如ul标簽，不加任何樣式的ul，也是有40px的padding-left。
将标準盒模型修改為IE盒模型的方法： 給元素添加樣式
box-sizing:border-box; IE 盒模型
IE盒子模型中，width 和 height 指的是内容區域+border+padding的寬度和高度。
box-sizing:content-box; 盒子占據的空間大小