兄弟关系外间距塌陷问题:
现象:
元素呈并列关系,在垂直方向相邻的maring
外间距问题,会出现叠加
两个值一样大,取当前值,不一样取最大
原因:并列关系的两个元素共用了外间距区域
解决:分别给这两个元素设置一个父元素,并给父元素设置overflow:hidden
父子关系外间距崩塌
现象:
1元素嵌套关系,子元素的margin-top值会叠加给父元素
2如果父元素也有margin-top值会与子元素的margin-top值合并,
取两者最大值
原因:
父元素和子元素共用一个上外中域区域
解决:
1为父元素设置上内框盒子上填充
padding
2为父元素设置overflow:hidden
溢出隐藏 overflow: hidden;
溢出显示 默认值 overflow: visible;
溢出显示滚动条 不管有没有溢出,都会显示滚动 overflow: scroll; 溢出自动 自动识别计算 overflow: auto;
水平方向的溢出情况
溢出显示 overflow-x: visible;
溢出隐藏 overflow-x: hidden;
溢出scroll overflow-x: scroll;
溢出auto overflow-x: auto;
垂直方向的溢出情况 overflow-y: hidden;
overflow-y: scroll;
overflow-y: visible;
overflow-y: auto