CSS 盒模型：div1 和 div2 哪个是大框？

看图：

.div1 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

那么，下面哪一项是正确的？ A、div1是图中的大框，div2是小框。 B、div1是图中的小框，div2是大框 C、div1和div2都是小框。 D、div1和div2都是大框。

答案： B、div1是图中的小框，div2是大框。

解析：

• box-sizing: border-box; 属性会将 padding 和 border 的宽度包含在元素的总宽度和高度内。
• div1 没有设置 box-sizing 属性，因此其 padding 和 border 会增加其实际占用的空间，导致其比 div2 更大。
• div2 设置了 box-sizing: border-box; 属性，因此其实际占用的空间仅为 width 和 height 指定的值，比 div1 更小。

所以，div1 是图中的小框，div2 是大框。