388day（盒子模型补充，外边距合并，塌陷）

《2018年10月27日》【连续388天】

标题：盒子模型补充，外边距合并，塌陷；
内容：

div {
	/*内容居中*/
	text-align: center;
	/*盒子居中*/
	/*margin: 0 auto;*/
	/*margin-left: auto;
	margin-right: auto;*/
	/*margin: auto;*/
}

<!-- 小图标，大图用背景 -->
	
	<div class="b1"></div>
	<div class="b2"></div>

* {
	margin: 0px;
	padding: 0px;
}

div{
	background-color: black;
	width: 200px;
	height: 200px;
}

.b1 {
	margin-bottom: 100px;
}

.b2 {
	background-color: blue;
	margin-top: 50px;
}

/*外边距合并问题，
两个盒子的外边距会合并，并且以大为标准；*/

<div class="father">
		<div class="son"></div>
	</div>

/*对于两个嵌套关系的块，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素
的上外边距发生合并，以大者为依据；*/
.father {
	width: 500px;
	height: 500px;
	background-color: black;
}

.son {
	width: 100px;
	height: 100px;
	background-color: blue;
	margin-top: 50px;
}

解决：

1.用border；

2. 用padding；

3.overflow:hidden;