width 及 hight 是css裏頭做常出現的屬性，幾乎每個物件都會用到，但是身為小白的我們卻很難把他用好，導致出現跑版的狀況，為了我們小白能夠理解他們的常出現的問題點，所以今天我們就來介紹一下，基礎功的width及height。

常見的寫法

width:50px
heigtht:100%

但是它的種類有以下這麼多:

* px 像素
* pt
* %  相對父層所佔的比例的100%
* em 
* ex
* vw viewport width的大小
* vh viewport height的大小
* vmin
* vmax

100%的範圍

不管設定width 100%還是height 100%，物件都會是相對於父層內的100%空間，而這個空間會扣掉padding的大小。

%不等於vw

vw是視窗的大小，也就是你看到的視窗大小，%指的是在你設置的該物件，對於他的父層內容大小，比如說div的寬是100px，且是wrap的父層，而你設置wrap的width:100%，那麼wrap的寬就是100px。

設定了寬高跑版

在設置width和height一定要注意內容物計算的問題，因為每個物件的內容物都是一個空間，這個空間如果沒有計算清楚，就會出現跑版的狀況，比如說父層的物件有設置padding，如果你在子層設置寬和高，那就會直接把父層的空間撐大，會這樣是因為空間預設的計算方式是從content來計算，所以如果遇到padding撐大父層的狀況怎麼辦呢?
這時候我可以使用box-sizing:border-box來解決這個問題，至於box-sizing這個屬性我們就要另外一個篇幅來介紹他了 XD~

我是結尾

鐵人賽的家人們大家加油，堅持~堅持~還是堅持~很快就堅持到30天了~~~
我相信完成後的風景一定很美，see you guys~