《精通CSS：高级Web标准解决方案》系列（02）：可视化格式模型

1、盒模型概述

　　盒模型是CSS的基石之一，它指定元素如何显示以及如何相互交互。页面上每个元素被看做一个矩形框，这个框由元素的内容、内编剧、边框和外边距组成。

　　内边距出现在内容区域的周围。如果在元素上添加背景，那么背景会应用于内容和内边距组成的区域。

　　内边距、边框和外边距都是可选的，默认值为零。

　　在CSS中，width和height指的是内容区域的宽度和高度。假设框的每个边上有10px的外边距和5像素的内边距，如果希望这个框达到100px宽，就需要将内容的宽度设置为70px。

#myBox{
margin:10px;
padding:5px;
width:70px;
}

　　外边距叠加：当两个或更多垂直外边距相遇时，他们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加，如下图：