如果不設(shè)置塊級元素的 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;
}