width屬性
width屬性表示的是盒子內容的寬度。
width屬性的單位通常是px，也可以是em和百分數。
當塊級元素沒有設定width屬性時，這個塊級元素將在頁面的水平方向上鋪滿。也就是說，當塊級元素沒有設定width屬性時，它的寬度就是瀏覽器視窗的寬度。
h系列標籤、p標籤、li標籤、div標籤都是塊級元素。
height屬性
height屬性表示盒子內容的高度。
height屬性的單位通常是px，也可以是em和百分數。
盒子的height屬性如果不設定，不管這個盒子是不是塊級元素，它將自動的被它裡面的內容撐開，如果這個盒子裡面沒有內容，那麼height的值將預設是0。
width和height屬性的單位rem和百分數，主要在移動端開發中用的比較多。
padding屬性
padding是盒子的內邊距，就是盒子邊框的內壁到文字的距離。
padding有上下左右四個方向，每一個方向都可以單獨設定。相當於padding這個大的屬性下面又細分了4個方向的小屬性。
這4個小屬性，都是padding後面跟一個小短橫，然後跟方向描述詞，表示它是哪一個方向的padding。
padding的每一個方向上的數值，都是可以不一樣的。
接下來我在vscode和瀏覽器中演示下width、height、padding這幾個屬性。我建立了一個叫"width、height、padding.html"的檔案。程式碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>width、height、padding屬性詳解</title> <style> .box { width: 300px; height: 200px; background-color: red; color:#fff; padding-top: 30px; padding-right: 20px; padding-bottom: 10px; padding-left: 5px; }</style></head><body> <div class="box"> 所謂的光輝歲月，並不是後來閃耀的日子，而是無人問津時，你對夢想的偏執。 </div></body></html>在上面的程式碼中，我設定內容區域距離div盒子上邊框的距離是30畫素，距離div盒子右邊框的距離是20畫素，距離div盒子下邊框的距離是10畫素，距離div盒子左邊框的距離是5畫素。
在瀏覽器中，右鍵檢查，我們看到盒子模型是這樣：
我麼看到內容區域是300畫素寬度乘以200畫素高度，上下左右方向的內邊距都顯示出來了。滑鼠滑到盒子模型的300*200內容區域上，效果更直觀。
padding的寫法
1、四數值寫法
四數值寫法，每一個數值就是分別代表某一個方向上的數值。
第一個數值代表內容和上邊框方向的距離，
第二個數值代表內容和右邊框方向的距離，
第三個數值代表內容和下邊框方向的距離，
第四個數值代表內容和左邊框方向的距離，
每一個數值之間用空格隔開。
比如：
這就是四數值寫法。
使用這種寫法，比我上面的程式碼中的寫法更簡潔。上面的程式碼中，我是按照padding-top、padding-right、padding-bottom、padding-left這四個小屬性寫的，要寫4行程式碼，而用這種四數值寫法，只需要一行程式碼，就能把四個方向都設定了。
只要記住，四數值寫法，就是按照上右下左的順序來設定padding的，你也可以按照鐘錶的順時針方向記憶。
2、三數值寫法
三數值寫法數值之間也是用空格隔開。三個數值分別表示上、左右、下的方向的距離。
比如：
這就是三數值寫法，第一個值表示上方向10畫素，第二個值表示左右方向，就是左方向是20畫素，右方向也是20畫素，第三個值表示下方向30畫素。
三數值寫法，也可以按照上右下左去記，第一個數值是上，第二個數值是右，第三個數值是下，第四個數值是左，但是左方向沒有值，所以左方向就和右方向一樣。
3、二數值寫法
二數值寫法數值之間也是用空格隔開。分別表示上下、左右方向的距離。
比如：
這就是二數值寫法。也就是說，如果你給padding設定了2個值，CSS就會認為，第一個值是上下方向都是同樣的距離，第二個值表示左右方向，也是同樣的距離。
二數值寫法，也可以按照上右下左去記。比如上面的示例，上10px，右20px，下沒有，所以跟上一樣，也是10px，左也沒有，所以跟右一樣，也是20px。
4、一數值寫法
一個數值，表示上下左右四個方向距離都一樣。
接下來我們看一個盒子模型圖：
上下都是30畫素，左右沒有，那麼padding屬性如何寫呢？
沒錯，就是
但是不能寫成----padding：30px;
這樣寫就錯了，這樣寫就表示四個方向都是30畫素，顯然是不對的。
左右沒有，但是也必須要寫一個0，表示左右都是0，CSS中，出現0這個數值，後面可以不帶單位。
再看這個盒子模型：
上、左右都是40畫素，下沒有，
我們可以用三數值寫法，即padding：40px 40px 0;
但是更推薦一種新寫法：
這種寫法就更能體現CSS的層疊性，我們先設定4個方向都是40，然後再設定下方向為0，去覆蓋前面一條屬性中的下方向的數值，非常有靈性。
這種寫法就是用小屬性去層疊大屬性，非常推薦這種寫法。
關於padding的各種寫法，請自己去寫程式碼驗證練習。