margin的坍塌现象 :
标准文档流中,竖直方向的margin不累加,以较大的margin值为准进行渲染。
<style>
.box{
width: 200px;
height: 200px;
}
.box1{
background-color: yellowgreen;
/* 下外边距 */
margin-bottom: 50px;
}
.box2{
background-color: blueviolet;
/* 上外边距 */
margin-top: 30px;
}
/* 如果不在标准流盒子之间是没有塌陷现象的*/
</style>
</head>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</body>
预览效果图
这个例子,浏览器渲染页面的时候,用的外边距是box1设置的值。box2设置的值舍弃没有用。
解决塌陷现象:不要同时给两个盒子 设置 上 下 外边距。(标准文本流中)
如果不在标准流盒子之间是没有塌陷现象的 :
如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的:
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 430px;
border: 5px solid pink;
/* 溢出: 该属性规定当内容溢出元素框时发生的事情,
设置内容是否会被修剪,溢出部分是否会被隐藏;例如当属性值设置为“visible”则内容不会被修剪,
为“hidden”则内容会被修剪并且其余内容是不可见的。*/
overflow: hidden;
}
.box{
/* 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: */
width: 220px;
height: 220px;
/* 浮动(浮动元素是脱离标准文档流的,我们简称脱标 */
float: left;
}
.box{
/* 给盒子1设置下外边距 */
border: 1px solid yellow;
margin-bottom: 50px;
}
.box2{
/* 给盒子2设置上外边距 */
border: 1px solid skyblue;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- .parent>.box.box1+.box.box2 -->
<!-- .parent>.box.box1(盒子1)+.box.box2(盒子2) -->
<div class="parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
</body>
预览效果图
上面这个例子中,两个浮动的元素,上下显示。
两者之间的外边距是,两者设置的值的累加和(50+20=70)。
他们真实的间隙是80像素