1.盒子模型是什么？

一种描述HTML元素在网页中的布局和尺寸的模型

2.有什么用？举个例子：

打开浏览器控制台，选中第一个，然后在页面中，鼠标任意停在一个元素上面，会看到一个有背景颜色的块，

然后再点击一下它，可以在控制台的element那里看到它的详细的信息，在“已计算” 这里，就可以看到在这个元素的盒子模型的数据信息，margin，border，padding，content。

3.相关的知识

margin的各个值 （上右下左）

（1）设置四个值：
margin: 25px 50px 75px 100px; 上外边距是 25px，右外边距是 50px，下外边距是 75px，左外边距是 100px
​
（2）margin 属性设置三个值：
margin: 25px 50px 75px;
上外边距是 25px，右和左是 50px，下外边距是 75px
​
（2）margin 属性设置两个值：
margin: 25px 50px; 先上下，后左右
上和下外边距是 25px，右和左外边距是 50px

盒子模型的宽度如何计算？

<!-- 如下代码，div1的offsetWidth是多大-->
<style>
    #div1{
        width:100px;
        padding:10px;
        border:1px solid #ccc;
        margin: 10px;
    }
</style>
​
<div id ="div1"></div>
​
<!-- offsetWidth = （内容宽度+ 内边距 + 边框） 没有margin-->
所以：offsetWidth =100+ 10+10 +1+1 = 122
​
<!--补充：让offsetWidth =100px该怎么做？
    样式那里加一个  box-sizing：border-box;
    100px包括width，padding，border 设置后它们的整体是100px
 -->
​
（1） offsetHeight offsetWidth包括：border + padding + content
（2）clientHeight clientWidth包括：padding + content
（3）scrollHeight scrollWidth 包括：padding + 实际内容的尺寸。（没有子元素就是content的尺寸，有子元素就是子元素的尺寸）

margin纵向重叠的问题

<!--如下代码所示，AAA和BBB之间的距离是多少？-->
<style>
    p{
        font-size:16px;
        line-height:1;
        margin-top:10px;
        margin-bottom:15px;
    }
</style>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
​
<!--肯定是大的包含小的，主要是中间有空白标签的怎么办？-->
​
<!--相邻元素的margin-top和margin-bottom会发生重叠
    空白内容的<p></p>也会重叠。类似于被忽略掉
    所以：答案是15px。
    中间的空内容也会重叠，所以忽略
​
-->

margin负值的问题（直接问答）

对margin的top、left、right 、bottom设置负值。有何效果？
​
margin-top和margin-left负值 ，元素自己向上、向左移动
margin-right负值，它右侧的元素左移，自身不受影响
margin-bottom负值，它下方的元素上移，自身不受影响

---