内容： border + content + margin + padding
两种盒模型的区别
计算高度和宽度的方式不同
标准盒模型的计算方式 是 content 的高度和宽度
IE 盒模型的计算方式是 content + padding + border
1. 获取内联样式的宽、高.. (只能获取内联样式）
2. 内联和外联样式都能取到（只支持IE）
3. 所有的都支持
4. 计算绝对位置，能获取4个元素值 top right width height
对于行内元素 margin-top margin-bottom 设置无效， margin-left margin-right 有效！ 对于相邻的块级元素 margin-top 和 margin-bottom 两者叠加按照一定的规则
（1） 都是整数 margin值取两者的最大值
（2） 都是负数 margin值取最小值
（3）两者正负相反，margin值取两者之和
（1） BFC 这个元素的垂直方向的边距会发生重叠。
（2） BFC 的区域不会与浮动元素的box重叠
（3） BFC 在页面是一个独立的容器，内外元素互补干涉
（4）计算 BFC 高度的时候浮动元素也会参与计算
根元素：
（1） float 属性不为 none
（2） position 为 absolute 或 fixed
（3） display 为 inline-block table-cell`````` table-caption``````flex`````` inline-flex
（4） overflow 不为 visible
（2） BFC 不与 float 重叠
（3） BFC 子元素即使是浮动元素，也不影响父集元素的计算。
如果不创建 BFC 父级元素的高为 0
显然，盒模型比我想象的，比我最开始在前端课程中学到的其实要复杂得多。
我将现阶段学到的内容与过去学习所留下的印象进行对比，得出了如下我以为CSS盒模型中的难点和容易被忽视的点。
它是一切开始的基础
在MDN的文章中，盒模型被分为 标准盒模型 和 替代盒模型 。
通常我们一开始学习的盒模型是标准盒模型，它的width和heigth属性所设置的是content的宽度和高度，而不是盒子部分的宽度和高度（把border和它所围起来的部分叫盒子部分）
所以在练习布局的时候，我们有时候会觉得这个width和heigth很怪，并不能很方便直接地将我们心中所想象的布局表达出来，有时甚至需要计算。
而替代盒模型更符合我们的直觉。替代盒模型中的width heigth所指即为border所包括部分的width heigth.
将浏览器默认的标准盒模型改为替代盒模型
margin可以有负数，而padding不可以为负数。
负数意味着样式会重叠入侵。
[图片上传失败...(image-b2c4e1-1642049365894)]
可以参考视频: CSS外边距塌陷 - Web前端工程师面试题讲解
折叠的规则很好理解，大的覆盖小的，长的覆盖短的。
比如A和B的外边距折叠，A的外边距为10， B的外边距为20，那么结果是AB的间距为20。
外边距重叠的情况一共有三种。
之所以是垂直方向，是因为折叠发生在block元素上，block元素并不存在水平相接的情况。
对于Inline元素，比如说两个水平相接的span标签，实测是不会折叠的。
这个有点复杂，MDN的说法如下：
举例如下:
设置了border:solid, 正常：
将border:solid设置为none后，出现了折叠。（可以理解为偏移的参照系变化了，未设置Border，参照变成了上面的divB）
更为深入的探究，等往后遇到了再说吧。
参考： MDN盒模型
在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
记住，是所有的元素都可以看出一个盒子！
下图为一个CSS盒子模型的内部结构：
