前端面試八股文每日一題——CSS
CSS的盒子模型?
答:一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成,包括:
內(nèi)容(content)。
內(nèi)邊距(padding),內(nèi)容與邊框之間的距離。
邊框(border)。
外邊距(margin),邊框與外部元素之間的距離。
四個(gè)部分,這四個(gè)部分一起構(gòu)成了盒子模型。

CSS 中的盒子模型包括 IE 盒子模型(怪異盒模型)和標(biāo)準(zhǔn)的 W3C 盒子模型(標(biāo)準(zhǔn)盒模型)。
在標(biāo)準(zhǔn)的盒子模型中,width指content部分的寬度。
在 IE 盒子模型中,width表示content+padding+border這三部分的寬度。
故在計(jì)算盒子的寬度時(shí)存在差異:
標(biāo)準(zhǔn)盒模型: 一個(gè)塊的總寬度 = width + margin(左右) + padding(左右) + border(左右)。
怪異盒模型: 一個(gè)塊的總寬度 = width + margin(左右)(既 width 已經(jīng)包含了 padding 和 border 值)。
標(biāo)簽: