前端面试八股文每日一题——CSS

CSS的盒子模型？

答：一个元素占有空间的大小由几个部分构成，包括：

• 内容（content）。

• 内边距（padding），内容与边框之间的距离。

• 边框（border）。

• 外边距（margin），边框与外部元素之间的距离。

四个部分，这四个部分一起构成了盒子模型。

CSS 中的盒子模型包括 IE 盒子模型（怪异盒模型）和标准的 W3C 盒子模型（标准盒模型）。

• 在标准的盒子模型中，width指content部分的宽度。

• 在 IE 盒子模型中，width表示content+padding+border这三部分的宽度。
  

故在计算盒子的宽度时存在差异：

• 标准盒模型： 一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)。

• 怪异盒模型： 一个块的总宽度 = width + margin(左右)（既 width 已经包含了 padding 和 border 值）。