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