CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
margin 清除周围的元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
当元素的 padding 内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title></title>
7 <style type="text/css">
8 #div1{
9 width: 500px;
10 height: 500px;
11 background: lightblue;
12 overflow: hidden;
13 /*border-top-width: 5px;
14 border-top-color: red;
15 border-top-style: solid;*/
16 border: 5px solid; red ;
17 /*solid实线
18 double双实线
19 dotted点虚线
20 dashed 线段虚线*/
21 border-radius: 50%;
22
23 }
24 #div2{
25 width: 100px;
26 height: 100px;
27 background: lightgreen;
28 /*margin-left: 50px;
29 margin-top: 50px;*/
30 /*margin: 50px 0 0 50px;*/
31 /*margin后可接多个元素 四个值的方向是上右下左*/
32 /*margin: 10px 20px 30px;*/
33 /*上，左右，下*/
34 /*margin: 10px 20px;*/
35 /*上下，左右*/
36 /*margin: 10px;*/
37 /*四个方向*/
38 margin: 50px auto 0;
39 /*使模型居中*/
40 }
41 </style>
42 </head>
43 <body>
44 <div id="div1">
45 <div id="div2"></div>
46 </div>
47 </body>
48 </html>
49 <!-- boder是边框，margin是外边距，padding是内边距 -->
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。