1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- border：边框 5 padding：内边距 6 margin：外边距 7 --> 8 <meta charset="UTF-8"> 9 <title>盒子模型</title> 10 <style type="text/css"> 11 .box{ 12 width: 200px; /* 宽 */ 13 height: 200px; /* 高 */ 14 background-color: red; /* 背景色 */ 15 border-top-color: black; /* 顶部边框背景色 */ 16 border-top-width: 10px; /* 顶部边框的宽度 */ 17 border-top-style: solid; /* 实线 solid 虚线 dashed 点线 dotted */ 18 border-top:20px solid blue; /* 效果同上三个 */ 19 border-left: 20px solid blue; 20 border-right: 20px solid blue; 21 border-bottom: 20px solid blue; 22 border:20px solid black; /* 效果同上三个 */ 23 24 /*padding-top:20px; 25 padding-right:80px; 26 padding-bottom:100px; 27 padding-left:60px; 28 */ 29 padding: 20px 80px 100px 60px; /* 从上到右到下到左，顺时针方向 */ 30 padding: 20px 80px 100px; /* 上20 左右都是80 下是100 */ 31 padding: 20px 80px; /* 上下都是20 左右都是80 */ 32 padding: 20px; /* 上下左右都是20 */ 33 34 margin: 20px; /* 盒子距离浏览器边框的距离 */ 35 } 36 </style> 37 </head> 38 <body> 39 <div class="box">盒子</div> 40 </body> 41 </html>