盒子大小的计算
盒子的大小因模型的不同而有所差异，此前忽略了盒子类型的讨论，一味地将盒子大小=content+（单侧padding+单侧border）*2是不合理的，现做如下补充。
盒模型种类（css用box-sizing属性作区分）
标准盒模型 box-sizing:cotent-box;
IE盒模型/框架盒子/怪异盒子 box-sizing:border-box;
然而在编码过程中又有了新的疑惑，如下：
①查阅某位博主关于盒模型的总结时，见到如下例子
符合上述图片（当为border-box时，盒子尺寸=width/height）的描述，但此时盒子宽度使用的是百分比形式（且border的30px被计入，width与border共占浏览器宽度的50%）。
②自己编辑代码时，宽度设置为具体像素px形式，此公式却不再适用？（因为当box-sizing为border-box时，盒子尺寸除了所告知的width/height，又另外加上了border！）
疑惑待解ing...
盒子的外边距重叠问题
解决margin重叠问题补充之（父子元素margin重叠）：
如图：设定父元素par的margin-top:20px；子元素childmargin-top:50px;最终margin-top取最大值50px。
那如何实现子元素在父元素中距离父元素50px的有效间距呢？
答案是:使父元素成为一个独立的BFC（下图通过给父元素加overflow:hidden变其为BFC），这样内部的元素不再与外部有任何关联！
...........................................................................................................................................................................................................................................................................
即便疫情，也要逆战前行！
原文：https://www.cnblogs.com/2020lmj/p/12354188.html