简单
技术面试0 次浏览

请解释一下 CSS 中的盒模型是什么,并说明如何计算一个元素的总宽度和总高度。

微软中国前端工程师
CSS盒模型

答题要点

推荐答题框架:先定义盒模型,再说明计算方法。关键要点:1. 盒模型由内容区、内边距、边框和外边距组成。内容区是元素实际显示的内容,内边距是内容与边框之间的距离,边框围绕内容和内边距,外边距是元素与其他元素之间的间距。2. 元素总宽度计算:总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距。3. 元素总高度计算:总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距。示例思路:比如一个元素,内容宽度为 200px,左右内边距各 10px,左右边框各 2px,左右外边距各 5px,那么总宽度就是 200 + 10×2 + 2×2 + 5×2 = 234px。