有必要提一句，盒模型的基本结构是需要牢记在心的。

它是一切开始的基础

image.png

关于设置盒子的宽度和高度

在MDN的文章中，盒模型被分为标准盒模型和替代盒模型。
通常我们一开始学习的盒模型是标准盒模型，它的width和heigth属性所设置的是content的宽度和高度，而不是盒子部分的宽度和高度（把border和它所围起来的部分叫盒子部分）
所以在练习布局的时候，我们有时候会觉得这个width和heigth很怪，并不能很方便直接地将我们心中所想象的布局表达出来，有时甚至需要计算。

而替代盒模型更符合我们的直觉。替代盒模型中的width heigth所指即为border所包括部分的width heigth.

4.jpg

将浏览器默认的标准盒模型改为替代盒模型

.x {
    box-sizing:border-box;
}

关于边界的正负数

margin可以有负数，而padding不可以为负数。
负数意味着样式会重叠入侵。
[图片上传失败...(image-b2c4e1-1642049365894)]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>外边距为负</title>
        <style>
            span {
                background-color: #00FFFF;
                border: solid;
                margin-left: -20px;
                margin-bottom: 10px;
            }
            .box1 {
                background-color: #87CEEB;
                margin-top: 10px;
                width: 200px;
            }
            .box2{
                background-color: #008000;
                width: 200px;
                margin-top: -10px;
            }
            section {
                margin-top: 13px;
                margin-bottom: 87px;
            }
            header {
                margin-top: 87px;
            }
        
            footer {
                margin-bottom: 13px;
            }
            
        </style>
    </head>
    <body>
        <span>Inline盒子</span>
        <span>Inline盒子2</span>
        <div class='box1'>block盒子1</div>
        <div class='box2'>block盒子2</div>
    </body>
</html>

关于外边距折叠（塌陷）

可以参考视频:CSS外边距塌陷 - Web前端工程师面试题讲解

折叠的规则很好理解，大的覆盖小的，长的覆盖短的。
比如A和B的外边距折叠，A的外边距为10， B的外边距为20，那么结果是AB的间距为20。
外边距重叠的情况一共有三种。

垂直方向上外边距相接的元素

之所以是垂直方向，是因为折叠发生在block元素上，block元素并不存在水平相接的情况。
对于Inline元素，比如说两个水平相接的span标签，实测是不会折叠的。

1.jpg

父子元素之间的折叠

这个有点复杂，MDN的说法如下：

如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

举例如下:
设置了border:solid, 正常：