一、盒子的实际占位大小计算

• 盒子的实际占位大小指的就是我们设置好宽高的基础上累加padding和border的大小；
• 盒子的实际宽度 = width + 左右的padding + 左右的border；
• 盒子的实际高度 = height+ 上下的padding + 上下的border；

二、padding和border撑大盒子问题

• 如果盒子宽高设置固定了，再去给盒子添加padding和border就会将盒子的大小撑大；

解决方案1：开启css3的盒子内减模式

• 直接给盒子设置css3的内减模式 box-sizing: border-box;
• 浏览器在解析的时候就会自己计算尺寸，会将设置的padding和border全部减去然后重新计算盒子的大小；、
• 设置box-sizing: border-box;后盒子大小就为自己设置的宽高，不会被padding和border撑大。

解决方案2：人为手动加多少减多少

• 加多少减多少，将我们自己设置的宽高减去对应的padding和border即可；

三、外边距塌陷问题

情况1：上下排列的盒子外边距合并

• 上下排列的两个盒子，上面的盒子设置了margin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁，小的值被大的值合并了；

解决方案:

• 单独设置给其中某一个盒子，不要两者都设置；

情况2：嵌套盒子外边塌陷（外边距穿透）

• 如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
• 需求：让红色盒子距离蓝色盒子的顶部有100px距离；
• 

解决方案1：

• 给父级盒子设置边框border，推荐只设置border-top，如果父盒子本身就有border就不会出现塌陷问题；

解决方案2：

• 给父级盒子设置内边距padding，推荐只设置padding-top，如果父盒子本身就有padding就不会出现塌陷问题；

解决方案3：

• 给父级盒子设置overflow:hidden；或display:flow-root；利用盒子的BFC模式；
• BFC模式：BFC(block formatting context）:块级格式化上下文。如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。

解决方案4：

• 给父级盒子设置浮动float: left；或定位position: 定位；就不会出现塌陷的情况。

解决方案5：

• 为父或子元素转换为行内块（设置 display: inline-block;）。