width 、 height 與 box-sizing : border-box ,content-box 的關系

預設 width 、height的 content-box 的寬高.

box-sizing 經常用來設定 width、height指定的區域

box-sizing 經常用做一些自适應的布局。

box-sizing：content-box | border-box

預設值：content-box

繼承性：無

動畫性：否

計算值：指定值

<dl></dl>

<dt>content-box： </dt>

<dd>padding和border不被包含在定義的width和height之内。對象的實際寬度等于設定的width值和border、padding之和，即 ( Element width = width + border + padding ) </dd>

<dd>此屬性表現為标準模式下的盒模型。</dd> <dt>border-box： </dt>

<dd>padding和border被包含在定義的width和height之内。對象的實際寬度就等于設定的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) </dd>

<dd>此屬性表現為怪異模式下的盒模型。</dd>

設定或檢索對象的盒模型組成模式。

開始做，堅持做，重複做