请老师看一下不知道理解的对不对

分为块盒模型和行盒模型，块盒模型可以给width/height 值，行盒模型设置width/height 值不起作用，此时行模型盒子的大小是由内容撑开的，由于button内没有内容，实际上此时的width/height 值为0，但是padding 和 border的值可以生效，所以蓝色部分其实是padding。

综上所述: div 实际宽度/高度＝width /height+ padding（左右上下）+ paddibg（左右/上下）
button 实际宽度/高度＝ padding（左右/上下）+ border（左右/上下）

子__沐 2022-09-03

源自：盒模型 2-8 项目作业

收起

1回答

imooc_慕慕 2022-09-04 09:57:22

同学你好，理解有误，解析如下：

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

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

可以看出div的宽度是由(width)100px+(padding)20px+(border)10px组成的,高度同理

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

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

button的宽度是由(width)70px+(padding)20px+(border)10px组成的,高度同理

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

同学可以再重新理解理解

祝学习愉快~

收起回答

提问者子__沐 #1

在标准盒模型下，width/height 表示的是盒子内容的宽度，而在 'IE盒模型'下，width/height表示的是实际宽度。那是不是有些标签元素天生默认的就是 'IE盒模型'呢？那我该怎么区分标签元素的盒模型到底是‘标准盒模型’还是 'IE' 盒模型呢？还是说只需要理解这两种盒模型，在制作网页的时候直接在控制台中看 display属性呢？那有没有简单的方法进行区分呢？

2022-09-04 10:12:19
imooc_慕慕回复提问者子__沐 #2

同学你好，解答如下：
1、在开发的时候，需要简单知道常见的元素是什么模型的。比如div是标准盒模型，那我设置width、padding的时候，就要考虑整体是怎么显示的。如果是button，可能就直接按照设计稿来设置width了，然后随意调整padding，不用考虑padding将整体撑大的情况，我们需要有一点这种意识。
2、常见的元素中，只有button是ie的，重点记住它就行，其他的可以按照标准盒模型设置。
3、写样式的过程中可以按照标准模型去写，如果发现元素的实际大小与预期不符，通过控制台查看一下元素的display属性，看看是否是盒模型不同造成了问题。
4、要知道这两种模式如何转换，建议在理论的基础上记住两者的差异，面试的时候可能会被问到。
祝学习愉快~

2022-09-04 10:32:03