面试题：CSS盒模型：内外边距与元素尺寸关系

Question

在标准CSS盒模型下，已知一个div元素设置了width为200px，height为150px，padding为20px，border为10px，请问该元素占据的总宽度和总高度分别是多少？阐述计算过程以及标准盒模型的特点。

Answer 1

1. 总宽度计算：
   • 在标准CSS盒模型中，元素占据的总宽度 = width + 2 * padding + 2 * border。
   • 已知width为200px，padding为20px，border为10px。
   • 那么总宽度 = 200px + 2 * 20px + 2 * 10px = 200px + 40px + 20px = 260px。
2. 总高度计算：
   • 元素占据的总高度 = height + 2 * padding + 2 * border。
   • 已知height为150px，padding为20px，border为10px。
   • 那么总高度 = 150px + 2 * 20px + 2 * 10px = 150px + 40px + 20px = 210px。
3. 标准盒模型特点：
   • 内容（content）：width和height属性设置的是内容区域的宽度和高度。
   • 内边距（padding）：在内容区域之外，边框（border）之内，会增加元素整体的尺寸。
   • 边框（border）：围绕在内边距之外，同样会增加元素整体的尺寸。
   • 外边距（margin）：在边框之外，用于控制元素与其他元素之间的间距，不影响元素自身占据的空间大小。总的来说，标准盒模型下元素的实际宽度和高度是内容区宽度/高度加上内边距和边框的宽度。