web中盒子模型的“外边距合并”与“margin-top塌陷问题”

外边距合并

盒子模型在嵌套的情况下，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决方法如下：

1、使用这种特性

例如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 500px;
			border: 1px solid #000;
			margin:50px auto 0;
			
		}

		.box div{
			/*margin-left: 20px;
			margin-right: 20px;
			margin-top: 20px; 
			margin-bottom: 20px;*/
			margin:20px; 
		}

	</style>
</head>
<body>
	<div class="box">
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
	</div>
</body>
</html>

2、设置一边的外边距，一般设置margin-top

3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上（特别是想要设置内部盒子居中时），导致内部的盒子margin-top设置失败。也只有top方向上有此bug。

解决方法如下：

1、外部盒子设置一个边框

2、外部盒子设置 overflow:hidden

3、外部盒子使用伪元素类（推荐）：

clearfix:before{
    content: '';
    display:table;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.clearfix:before{
			content: "";
			display: table;
		}

		.con{
			width: 300px;
			height: 300px;
			background-color: gold;
			/*border: 1px solid; 第一种解决塌陷的方法*/
			
			/*overflow: hidden; 第二种解决塌陷的方法*/
		}

		.box{
			width: 200px;
			height: 100px;
			background-color: green;
			margin-top: 100px;/*margin-top塌陷*/
			margin-left: 50px;/*其他方向无塌陷*/
		}
	</style>
</head>
<body>
	<div class="con clearfix">
		<div class="box"></div>
	</div>
</body>
</html>