盒子之间的并列

兄弟关系外间距塌陷问题:

现象:

元素呈并列关系,在垂直方向相邻的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