15 margin注意的问题 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             body{
 8                 /*把浏览器的默认margin都设置成0*/
 9                 margin: 0;
10             }
11             .box{
12                 width: 100px;
13                 height: 100px;
14                 background-color: gray;
15                 /**/
16                 /*margin-bottom: 10px;*/
17             }
18             /*box 和 box2 距离是多少？16和24行：并不是30，而是20如果设置了上下两个盒子的margin  两个盒子的距离是以大的那个margin为准（margin的塌陷）*/
19             .box2{
20                 width: 100px;
21                 height: 100px;
22                 background-color: green;
23                 /**/
24                 /*margin-top: 20px;*/
25                 /*非常常用的一条代码  盒子的居中，盒子必须设置宽高*/
26                 /*margin: 10px(上下) auto(自动计算左右的margin);*/
27             }
28         </style>
29     </head>
30     <body>
31         <div class="box"></div>
32         <div class="box2"></div>
33     </body>
34 </html>

 

 

谷歌浏览器默认的margin：11-14

将浏览器默认的margin设置为0:7-9

 

 margin：10px auto;

 

posted @ 2019-09-02 13:29  慕少溪梓  阅读(117)  评论(0)  编辑  收藏  举报