第十七节 盒子模型 

 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>

 

posted @ 2020-03-05 15:40  kog_maw  阅读(104)  评论(0)    收藏  举报