課程
/前端開發
/HTML/CSS
/企業網站綜合布局實戰
box1去除padding屬性后不是比box小么。
2016-11-27
源自：企業網站綜合布局實戰 2-1
正在回答
當box的box-sizing屬性為border-box時，padding不影響box的大小。
akun0 提問者
慕雪9262514
為什么我按照老師說的打完代碼瀏覽器不顯示東西
盒子模型尺寸基準有兩種，分別是content-box和border-box ?（默認是content-box）。理論上說，content-box 與 border-box 區別是：
? content-box盒子的寬度包含邊框和內邊距， 即盒子寬度=width+border+padding； ? ?
由于初始時padding為0，則content的寬度為width；隨著padding值和border值不斷增大，盒子寬度也跟著增大；
? border-box則已將邊框和內邊距計算在width中，即盒子寬度=width；且其內容 content 的大小為width的值減去邊框和padding的值。即content=width-padding-border。如果調大padding值和border值，盒子寬度（也是width）不會改變， 但content會不斷被擠進去而縮小。
總結：對于border-box,調節border和padding，寬度不變，內容不斷向內縮進去；
對于content-box,調節border和padding,寬度改變，且不斷向外擴張變大；
舉報
本課程重點介紹HTML/CSS實現常見企業網站布局的方法
1 回答padding屬性會影響整個盒子的大小
1 回答父級屬性怎么消除？
4 回答清除box的浮動，為啥是在box3中清除
1 回答寬度要不要減去padding-left啊？
1 回答為什么清除左浮動后box3會移到在box1和box2的下面，這個我不理解
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-11-27
當box的box-sizing屬性為border-box時，padding不影響box的大小。
2017-07-06
為什么我按照老師說的打完代碼瀏覽器不顯示東西
2016-12-04
盒子模型尺寸基準有兩種，分別是content-box和border-box ?（默認是content-box）。理論上說，content-box 與 border-box 區別是：
? content-box盒子的寬度包含邊框和內邊距， 即盒子寬度=width+border+padding； ? ?
由于初始時padding為0，則content的寬度為width；隨著padding值和border值不斷增大，盒子寬度也跟著增大；
? border-box則已將邊框和內邊距計算在width中，即盒子寬度=width；且其內容 content 的大小為width的值減去邊框和padding的值。即content=width-padding-border。如果調大padding值和border值，盒子寬度（也是width）不會改變， 但content會不斷被擠進去而縮小。
總結：對于border-box,調節border和padding，寬度不變，內容不斷向內縮進去；
對于content-box,調節border和padding,寬度改變，且不斷向外擴張變大；