css盒子模型试题

在我们学习 CSS 的过程中，盒子模型是非常重要的概念之一。因此，在各种编程题库中， CSS 盒子模型问题也成为了考核 CSS 基础知识的重点之一。

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid #000;
  padding: 5px;
}
 

以上是一个 CSS 盒子模型常见的代码案例，其中 .box 是一个盒子的类名，它的宽度是 100px，高度是 50px。它有 10px 的外边距，1px 的实线边框，以及 5px 的内边距。那么，这个盒子的最终宽度和高度是多少呢？

答案是：它的宽度是 122px，高度是 72px。

其中，宽度的计算方法是：100px + 2 × 1px（左右边框）+ 2 × 5px（左右内边距）+ 2 × 10px（左右外边距）= 122px。

而高度的计算方法是：50px + 2 × 1px（上下边框）+ 2 × 5px（上下内边距）+ 2 × 10px（上下外边距）= 72px。

通过这个题目，我们可以看到盒子模型中各个参数的作用和计算方法，为我们更好地掌握 CSS 盒子模型奠定了基础。