盒子模型：
所有HTML元素可以看作盒子,在CSS中，"box model"是用来设计和布局时 使用。
CSS盒模型本质上是一个盒子， 封装周围的HTML元素， 它包括：边距，边框，填充和实际内容。
外边距属性：设置对象四边的外部边距
- 内联块级元素和块级元素的可以设置外边距。
- 内联元素可以设置左、右两边的外边距；若要设置上、下两边的外边距，必须先使该元素变为块级元素或内联块级元素。
- 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
- 如果提供两个，第一个用于上、下，第二个用于左、右。
- 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
内边距属性：设置对象四边的外部边距
- 设置内联块级元素和块级元素的内边距。
- 行内元素可以设置左、右两边的内边距；若要设置上、下两边的内边距，必须先使该元素变为块级或内联块级元素。
- 改变padding的值，就改变了content的大小
- 而改变margin的值，则不改变content的大小
<style type="text/css">
#container{
border: 2px black solid;
width: 700px;
height: 800px;
}
#child{
border: 2px black solid;
width: 400px;
height: 400px;
margin: 100px auto;/* 设置外边距 */
padding: 100px;/* 设置内边距 */
}
</style>
</head>
<body> <div id="container">
<div id="child">div1</div>
</div>
</body>