盒子模型分類
-
IE盒子模型
-
標(biāo)準(zhǔn)盒子模型（W3C盒子模型）
這兩個(gè)模型的唯一區(qū)別是計(jì)算width和height時(shí)逗扒，IE盒子模型包含padding和border, W3C盒子模型則不包括。
CSS3指定盒子模型種類
- box-sizing: content-box
- box-sizing: border-box
border-box使用場(chǎng)景
-
如果網(wǎng)頁(yè)有兩塊區(qū)域剛好等于網(wǎng)頁(yè)區(qū)域時(shí)候欠橘，這個(gè)時(shí)候沒有任何關(guān)系矩肩。
-
如果給元素加上border或者padding，樣式會(huì)被頂下去肃续。
如果使用border-sizing: border-box黍檩，就會(huì)完美避開這個(gè)問題，因?yàn)榇藭r(shí)標(biāo)簽的寬度包括了邊框和內(nèi)邊距始锚。
當(dāng)需要兩個(gè)寬度為50%的div確保并列時(shí)刽酱，設(shè)置box-sizing:border-box。此時(shí)的width:50%瞧捌，是content+padding+border的寬度棵里。
