前言
盒子模型，英文即box model。無論是div、span、還是a都是盒子。

但是，圖片、表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張圖片裡並不能放東西，它自己就是自己的內容。

一個盒子中主要的屬性就5個：width、height、padding、border、margin。如下：
width和height：內容的寬度、高度（不是盒子的寬度、高度）。
padding：內邊距。
border：邊框。
margin：外邊距

敲黑板
在 CSS 盒子模型 (Box Model) 規定了元素處理元素的幾種方式： 內容、內邊距、邊框、外邊距。
在 CSS的標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。IE盒子模型中，width 和 height 指的是內容區域+border+padding的寬度和高度。

如果想保持一個盒子的真實佔有寬度不變，那麼加width的時候就要減padding。加padding的時候就要減width。因為盒子變胖了是災難性的，這會把別的盒子擠下去。

認識padding
padding就是內邊距。padding的區域有背景顏色。padding是4個方向的，所以我們能夠分別描述4個方向的padding。方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。
小屬性的寫法：

 padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 100px;

綜合屬性的寫法：(上、右、下、左)（順時針方向，用空格隔開。margin的道理也是一樣的）

padding:30px 20px 40px 100px

如果只寫了兩個值，比如說：

padding: 30px 40px;

則順序等價於：30px 40px 30px 40px;

要懂得，用小屬性層疊大屬性。比如

padding: 20px;
padding-left: 30px;

題目1：說出下面盒子真實佔有寬高，並畫出盒模型圖。

div{
        width: 200px;
        height: 200px;
        padding: 10px 20px 30px;
        padding-right: 40px;
        border: 1px solid #000;
    }

答案：

題目2：說出下面盒子真實佔有寬高，並畫出盒模型圖。

  div{
        width: 200px;
        height: 200px;
        padding-left: 10px;
        padding-right: 20px;
        padding:40px 50px 60px;
        padding-bottom: 30px;
        border: 1px solid #000;
    }

答案：padding-left:10px； 和padding-right:20px; 沒用，因為後面的padding大屬性，層疊掉了他們。