CSS3的box屬性是針對(duì)盒模型的一組新屬性，可以用來(lái)調(diào)整元素的尺寸、邊框和外邊距等。在前面的CSS2標(biāo)準(zhǔn)中，這些屬性是分開的，比較繁瑣。而現(xiàn)在，通過(guò)CSS3的box屬性，我們可以更方便地控制元素的盒模型。

.box{
/* 設(shè)定元素的盒子寬度 */
width: 100px;
/* 設(shè)定元素的盒子高度 */
height: 100px;
/* 設(shè)定元素的內(nèi)邊距 */
padding: 10px;
/* 設(shè)定元素的邊框?qū)挾取邮胶皖伾?*/
border: 1px solid #ccc;
/* 設(shè)定元素的外邊距 */
margin: 10px;
/* 使用CSS3的box-sizing屬性，將元素的尺寸計(jì)算方式改為border-box，這樣內(nèi)邊距和邊框的寬度就不會(huì)撐開元素 */
box-sizing: border-box;
}

通過(guò)上面的代碼，我們定義了一個(gè)名為.box的元素，并使用了box屬性來(lái)設(shè)定它的寬高、內(nèi)邊距、邊框、外邊距等。其中，box-sizing屬性是CSS3中新增的，它可以取兩個(gè)值：content-box（默認(rèn)值）和border-box。前者的計(jì)算方式是將元素的尺寸作為內(nèi)容區(qū)的尺寸，而后者的計(jì)算方式是將元素的尺寸作為包含內(nèi)邊距和邊框的總尺寸。

比如說(shuō)，當(dāng)我們?cè)O(shè)置一個(gè)元素的寬度為100px、內(nèi)邊距為10px、邊框?qū)挾葹?px時(shí)，如果使用content-box計(jì)算方式，那么元素的真實(shí)寬度為100+10+1+10+1+10+1=133px。而如果使用border-box計(jì)算方式，那么元素的真實(shí)寬度就是100px。顯然，使用border-box可以更好地控制盒子模型。