盒子模型(Box Modle)可以用來(lái)對(duì)元素進(jìn)行布局,包括內(nèi)邊距,邊框,外邊距,和實(shí)際內(nèi)容這幾個(gè)部分
盒子模型分為2種:
1.W3C標(biāo)準(zhǔn)的盒子模型(標(biāo)準(zhǔn)盒模型)
2.IE標(biāo)準(zhǔn)的盒子模型(怪異盒模型)
標(biāo)準(zhǔn)盒模型與怪異盒模型的表現(xiàn)效果的區(qū)別之處:
1.標(biāo)準(zhǔn)盒模型中width指的是內(nèi)容區(qū)域content的寬度,height指的是內(nèi)容區(qū)域content的高度
標(biāo)準(zhǔn)盒模型中下盒子的大小 = width(content) + padding + border + margin
2.怪異盒模型中的width指的是內(nèi)容,內(nèi)邊距,邊框總的寬度(content + padding + border);height指的是內(nèi)容,內(nèi)邊距,邊框總的高度
怪異盒模型下盒子的大小 = width(content + padding + border) + margin
box-sizing的使用
如果想要切換盒模型也很簡(jiǎn)單,這里需要借助css3的box-sizing屬性
box-sizing的默認(rèn)屬性是content-box
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
content-box:默認(rèn)值,border 和 padding 不算到width 范圍內(nèi),可以理解為是 W3c 的標(biāo)準(zhǔn)模型(default).總寬=width+padding+border+margin
border-box:border和padding劃歸到width范圍內(nèi),可以理解為是IE的怪異盒模型,總寬=width+margin
