05盒子模型 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         .outerDiv{
 9             width: 500px;
10             height: 300px;
11             border: 1px solid rgb(236, 132, 132);
12             background-color: rgb(141, 228, 240);
13             margin: 0px auto;  /*上下 左右*/ /*auto 自动平均分配 可居中*/
14         }
15 
16         .innerDiv{
17             width: 100px;
18             height: 100px;
19             border: 1px solid rgb(136, 232, 135);
20             float: left;
21         }
22 
23         /*
24             padding  内边距
25             margin  外边距
26         */
27 
28         .d1{
29             background-color: rgb(229, 237, 162);
30             /*
31                 margin-right: 10px;
32                 margin-top: 10px;
33                 margin-left: 10px;
34                 padding-top: 10px;
35                 padding-bottom: 10px;
36                 padding-left: 10px;
37                 padding-right: 10px;
38             */
39             margin: 5px 10px 15px 20px;  /*上 右 下 左*/
40             padding: 5px 10px 15px 20px;
41         }
42 
43         .d2{
44             background-color: rgb(249, 215, 170);
45             margin-left: 10px;
46         }
47 
48         .d3{
49             background-color: rgb(176, 176, 238);   
50         }
51 
52     </style>
53 </head>
54 <body>
55     <div class="outerDiv">
56         <div class="innerDiv d1">div1</div>
57         <div class="innerDiv d2">div2</div>
58         <div class="innerDiv d3">div3</div>
59     </div>
60 </body>
61 </html>

 

posted @ 2024-03-08 15:53  白茶花约  阅读(8)  评论(0)    收藏  举报