嵌套的块级元素垂直外边距塌陷
描述:当父元素没有padding-border的时子元素与父元素直接相邻子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并去两个值中的较大值。负值取绝对值较大值
解决方案:1.给父元素设置边框和内填充(慎用)
2.给父元素设置overflow hadding改规则变渲染
结构关系
相邻元素的垂直外边距合并塌陷、
描述:当两个块级兄弟元素、垂直方向上的margin直接相遇会发生合并最终结果较大值、负值取绝对值较大值
解决方案:尽量定义其中一个的margin值
给其中一个盒子加父元素:overflow hadding改变渲染
标准盒模型:box-sizing:content-box
怪异盒模型:box-sizing:border-box
盒子实际宽=width 盒子实际高=height
怪异盒模型直接进入内减(border、padding)
、