关于盒模型的补充

盒子大小的计算

盒子的大小因模型的不同而有所差异，此前忽略了盒子类型的讨论，一味地将盒子大小=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），这样内部的元素不再与外部有任何关联！

...........................................................................................................................................................................................................................................................................

即便疫情，也要逆战前行！