理解Margin边距塌陷与box-sizing的问题

---

 

 

父与子塌陷问题

 

子盒子与父盒子相互影响，margin值会重叠，谁大听谁的

 

运行结果：

 

 

box-sizing

box-sizing 原始属性值: content-box，该属性对于盒子尺寸来说，并不会让外边距(margin)计算在内

理解：即盒子原本设置宽高，并非盒子所呈现的宽高（计算时需要增加外边距）

box-sizing 属性值: border-box，该属性会让盒子外边距计算在内

理解：盒子设置的宽高，即为盒子所呈现出来的宽高