1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <!-- 1、利用auto设置水平居中
5 2、*****利用负值进行边框合并
6 3、补充：body的边框本身带有8个像素的margin边框 -->
7 <meta charset="UTF-8">
8 <title>Document</title>
9 <style type="text/css">
10
11 .box{
12
13 width: 200px;
14 height: 200px;
15 background-color: gold;
16 margin: 50px auto 100px; /* auto 自动计算左右宽，使盒子居中 */
17
18 }
19
20 .box1{
21
22 width: 200px;
23 height: 200px;
24 background-color: gold;
25
26 }
27
28 body{
29
30 margin: 0; /* body本身自带有8个像素的margin边框，这里让其与浏览器贴边 */
31 }
32
33 .box2 div{
34
35 width:200px;
36 height:30px;
37 border:1px solid green;
38 background-color:gold;
39 margin:-1px; /* 利用margin的负值进行边框合并 */
40 }
41 </style>
42 </head>
43 <body>
44 <div class="box"></div>
45 <br />
46 <div class="box1"></div>
47 <br />
48 <div class="box2">
49 <div></div>
50 <div></div>
51 <div></div>
52 <div></div>
53 <div></div>
54 </div>
55 </body>
56 </html>