转自 菜鸟教程
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
转自 链接
盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
书写手机网页时，必须约束视口宽度（320-420左右）： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" /> width=device-width 约束视口 initial-scale=1.0 初始视口倍数是1倍 minimum-scale=1.0 最小允许视口宽度是1倍 maximum-scale=1.0 最大允许视口宽度是1倍 user-scalable=no不允许用户缩放视口 书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。 一、百分比布局 width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。 height:高度的百分比是相对于父盒子height内容高的比。 padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。 border：不能书写百分数 子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）； height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）； padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）； 例：div{ width: 50%overflow: hidden} p{ width: 50%height: 100pxfloat: leftbackground-color: pink} p:last-child{ background-color: green}二、box-sizing:border-box css2中的盒模型是外扩的。 css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。） 例： 内减盒模型：书写的width、height就是盒子真正占有的宽和高。 讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！ 三、弹性盒 display的属性值：block ,inline,inline-block,none -webkit-box:弹性盒容器。 例： 书写：3个P，宽度比是1:2:3。（X+2X+3X=100%） 抽象公式： 四、固比固模型 固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。 例：1和3部分宽度是120px，2自动撑开。 1、利用浮动 2、绝对定位（推荐） 3、弹性盒 五、max-width 和 min-width 移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。 例：显然，盒模型比我想象的，比我最开始在前端课程中学到的其实要复杂得多。
我将现阶段学到的内容与过去学习所留下的印象进行对比，得出了如下我以为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盒模型
