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>