css3 box-sizing屬性，css3box-sizing

css3 box-sizing屬性，css3box-sizing
定義和用法

box-sizing 屬性允許您以特定的方式定義匹配某個地區的特定元素。

例如，假如您需要並排放置兩個帶邊框的框，可通過將 box-sizing 設定為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

預設值：	content-box
繼承性：	no
版本：	CSS3
JavaScript 文法：	object.style.boxSizing="border-box"

box-sizing：content-box | border-box預設值：content-box content-box：padding和border不被包含在定義的width和height之內。對象的實際寬度等於設定的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )此屬性工作表現為標準模式下的盒模型。border-box：padding和border被包含在定義的width和height之內。對象的實際寬度就等於設定的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )此屬性工作表現為怪異模式下的盒模型。 例子：

<style type="text/css">    div{width:200px;height:100px;padding: 20px;        background:#eee;}    .content-box{        box-sizing:content-box;        -moz-box-sizing:content-box;        border: 10px solid #333;    }    .padding-box{        box-sizing:padding-box;        -moz-box-sizing:padding-box;        -webkit-box-sizing:padding-box;/*chrome 不支援*/        border: 10px solid #ccc;          }    .border-box{        box-sizing:border-box;        -moz-box-sizing:border-box;        border: 10px solid #666;    }</style><div class="content-box">content-box</div><div class="padding-box">padding-box/*chrome 不支援*/</div><div class="border-box">border-box</div>