本文講述 padding / border 的設置後是否對 width 有影響，width 等於 auto 與 100% 的區別 CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。 概述 那麼 css 屬性中width = ？呢 在標準的w3c的規定 ...
本文講述 padding / border 的設置後是否對 width 有影響，width 等於 auto 與 100% 的區別
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。
概述
那麼 css 屬性中width = ？呢
在標準的w3c的規定中 width 的真實值等於 content 區域的值，不加上 padding 與 border 的值
這雖然與我們常規的理解是有所偏差，因為現實角度理解一個盒子寬度應該是 = 內邊距 + 邊框 + 內容空間寬度，但是標準就是標準你必須遵守；
而標準有時候也是有問題的，在IE5/6中 width的值 = content的width + padding的width + border的width，所以開發的時候要註意 ；
術語:
- padding : 內邊距；
- margin ： 外邊距；
- border ： 邊框；
box-sizing
這是一個css3中新增的一個屬性，可以用來控制，width的值是否包括邊框和內邊距，它有兩個值：
- content-box ：代表 width屬性 和 height屬性 的值是不包括 內邊距 和 邊框值的，它是預設屬性；
- border-box ：代表 width屬性 和 height屬性 的值是包括 內邊距 和 邊框 值的；
width : auto 和 width : 100% 的區別
- 在box-sizing 為 content-box 的時候：
- width : auto 時，width = 父級的 width - 自己的 padding - 自己的 border；
- width ：100% 時，width = 父級的 width；
- 在box-sizing 為 border-box 時：兩個並無區別
ps：這上面所指父級元素的 box-sizing 均為 content-box 的條件下
