畢家大少

盒子模型分為標(biāo)準(zhǔn)盒子模型和怪異的盒子模型

1.標(biāo)準(zhǔn)的盒模型 （content-box）

　　你設(shè)置的寬和高（width/height）是內(nèi)容的部分寬高，所以盒子的實(shí)際寬度=內(nèi)容的寬高+boder+padding

 我設(shè)置的寬為100px高為100px，是內(nèi)容的寬高，實(shí)際盒子的寬150px高為150px     寬=100px(conttent)+20px(padding)+5*2（border）

所以可以得出：如果你想要的盒子就是寬100px 高為100px的話(huà)，就不能再改變盒子的padding和border的值，選用border-box

2.怪異的盒子模型(border-box)

　你設(shè)置的寬和高（width/height）就是盒子的大小，設(shè)置的padding和border不會(huì)改變盒子的大小，相反的是內(nèi)容區(qū)的高度會(huì)隨之而改變

 從上面的圖可知，只是改變了box-sizing為border-box

設(shè)置的寬高都為100px 盒子的padding值20px border值為5px，盒子的寬度沒(méi)有改變內(nèi)容的寬度卻減小了，變成了50px，下面我繼續(xù)變大padding可以明顯的看見(jiàn)變化

 padding為25px border為5px content寬度為40px ,盒子的大小沒(méi)有變化，還是100px(25*2+40+5*2)

 padding為20px border為10px content寬度為40px ,盒子的大小沒(méi)有變化，還是100px(20*2+40+10*2)