如果不設(shè)置塊級(jí)元素的 width 屬性，那么這個(gè)屬性的默認(rèn)值是 auto ，結(jié)果會(huì)讓元素的寬度擴(kuò)展到與父元素同寬。

沒有寬度的盒子

沒有（就是沒有設(shè)置 width）寬度的元素始終會(huì)擴(kuò)展到填滿其父元素的寬度為止。添加水平邊框、內(nèi)邊距和外邊距，會(huì)導(dǎo)致內(nèi)容寬度減少，減少量等于水平邊框、內(nèi)邊距和外邊距的和。

有寬度的盒子

為設(shè)定了寬度的盒子添加邊框、內(nèi)邊距和外邊距，會(huì)導(dǎo)致盒子擴(kuò)展得更寬。實(shí)際上，盒子的 width 屬性設(shè)定的只是盒子內(nèi)容區(qū)的寬度，而非盒子要占據(jù)的水平寬度，瀏覽器會(huì)在寬度之外繪制元素的內(nèi)邊距和邊框。盒子的實(shí)際寬度等于 width 、邊框、內(nèi)邊距、外邊距的和。

注意

CSS3 新增了一個(gè) box-sizing 屬性，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制，通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

{ 
    box-sizing:border-box; 
}