这道题能给我解释下吗为什么DIV和buttnon大小有差别吗

同学你好， @“zzz__ZZZ”解释的很棒，浏览器解析时两个元素的盒模型不一样，导致两个元素大小存在差异，具体参考如下解析：

盒模型有两种：一种是“W3C的标准盒模型”，另一种是“ie盒模型”。

1、“W3C的标准盒模型”就是课程中讲到的。在该盒模型下，元素的大小等于“border+padding+内容区”；而div标签默认情况下是按照“W3C的标准盒模型”来计算的，从浏览器上能看到div宽高分别是130、60，如下：

其中宽度130就等于设置的宽度100px（内容区），加上左右border共10px，再加上左右padding共20px，高度同理。

2、button按钮默认是按照“ie盒模型”来计算的，在ie盒模型下，设置的width与height是包含border与padding的，所以button按钮的总宽度就是设置的100*30：

它的padding、border都是“内缩”的：

而我们学过的box-sizing属性，可以改变盒模型，比如给button设置box-sizing属性，就可以让其和上面的div一样大。示例：

​

祝学习愉快！

浏览器解析这两个元素盒模型时，计算标准不一样，可以用box-sizing改成一样的计算方式