第二十一节 margin技巧

 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>