盒子形式

盒子定义：

把HTML页面中的布局看成是一个矩形盒子，即一个盛装内容的容器，包括：
边框:border
外边距：margin
内边距padding和内容content

边框：border边框粗细边框颜色
边框样式：solid：实线，dashed：虚线
dotted：点线，
例：

			#nav1{
				width: 100px;
				height: 100px;
				background: red;
				border: 10px hotpink solid;
			}
			#nav2{
				width: 100px;
				height: 100px;
				background: red;
				border: 10px hotpink dashed;
			}
			#nav3{
				width: 100px;
				height: 100px;
				background: red;
				border: 10px hotpink dotted;
			}

内边距：
padding：20px 20px 20px 20px;
20px从左到右分别是上，右， 下，左，也就是顺时针

“*”初始化网页元素：网页中所有内外边距都为0
盒子水平居中：左右外边距设置为auto，前提是有width
给相邻两个盒子都设置外边距margin，垂直方向外边距取两者最大值

塌陷

给两个嵌套的盒子都设置了margin，垂直方向取最大值
解决方法：
1.给父元素加border
2给父元素加overflow：hidden