一、外边距问题及解决方法
1、兄弟关系外间距塌陷问题
兄弟关系外间距塌陷问题 现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象; 两个值一样大,取当前值 两个值不同,取较大值 原因:并列关系的两个元素共用了一个外间距区域 解决办法: 分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden'. 0 .box1 { width: 100px; height: 100px; background-color: yellow; margin-bottom: 50px; } .box2 { width: 100px; height: 100px; background-color: red; margin-top: 100px; } .father1, .father2 { overflow: hidden; } <div class="father1"> <div class="box1"></div> </div> <div class="father2"> <div class="box2"></div> </div>
2、父子关系外间距塌陷
父子关系外间距塌陷 现象: 1.元素嵌套关系,子元素的margin-top值会叠加给父元素; 2.如果父元素也有margin-top值,会与子元素的margin-top值合并,取两者较大值; 原因: 父元素和子元素公用一个上外边距区域 解决方法: 1.为父元素设置上边框或者上填充 2.为父元素设置overflo:hidden; 3.转换思路,巧用padding,规避margin .father { width: 200px; height: 200px; background-color: tomato; margin-top: 100px; /* border-top: 2px solid royalblue; padding-top: 1px; */ overflow: hidden; } .son { width: 100px; height: 100px; background: blue; margin-top: 50px; } .father1 { width: 200px; height: 200px; background-color: purple; padding-top: 20px; } .son1 { width: 100px; height: 100px; background: pink; /* padding-top: 10px; */ } <div class="father"> <div class="son"></div> </div> <hr> <div class="father1"> <div class="son1"></div> </div>
二、overflow详解
概述:溢出元素内容区的内容会如何处理
取值
overflow: visible;溢出显示,默认值 overflow: hidden;溢出隐藏 overflow: scroll;溢出显示滚动条,横向和纵向滚动条都显示 overflow: auto;自动,内容溢出时,显示滚动条
overflow-x 只包括水平方向。
overflow-y 只包括垂直方向
body{ /* overflow:hidden ; */ /* overflow-x 只包括水平方向。 overflow-y 只包括垂直方向。 */ overflow-x: hidden; overflow-x: visible; overflow-x: scroll; overflow-x: auto; overflow-y: hidden; overflow-y: visible; overflow-y: scroll; overflow-y: auto; } <img src="./images/yk.png" alt="">
应用
-
产品描述的溢出隐藏
-
模块溢出显示滚动条