盒子模型的坑与浮动

盒子模型的坑：

　　1：垂直方向的外边距合并

 1   <style>
 2         .box1{
 3             width: 200px;
 4             height: 200px;
 5             background-color: pink;
 6             /*display: inline-block;*/
 7             margin-bottom: 30px;
 8         }
 9         .box2{
10             width: 200px;
11             height: 200px;
12             background-color: green;
13            /* display: inline-block;*/
14            /* margin-top: 20px;*/
15         }
16     </style>
17 </head>
18 <body>
19     <!--在上下盒子的布局里面盒子的垂直间隙是最大的一个值
20 
21     -->
22     <div class="box1"></div>
23     <div class="box2"></div>
24 </body>

解决办法：只用指定一个盒子的margin-top或者margin-bottom值

　　2：父子盒子外边距的合并(塌陷)

 1 <style>
 2         .box1{
 3             width: 200px;
 4             height: 200px;
 5             background-color: pink;
 6             display: inline-block;
 7             margin-right: 30px;
 8         }
 9         .box2{
10             width: 200px;
11             height: 200px;
12             background-color: green;
13             display: inline-block;
14             margin-left: 20px;
15         }
16     </style>
17 </head>
18 <body>
19     <!--外边距的重叠只会发生在垂直方向
20 
21     -->
22     <div class="box1"></div>
23     <div class="box2"></div>

解决方法：

1) 父盒子指定上边线；

2) 父边框给定padding;

3) 父边框给，overflow: hidden;

 1 <style>
 2         /*
 3         解决子盒子magin带动父盒子移动问题
 4         1 给父盒子 border-top: 1px solid transparent;1个像素的边框
 5         2 给父盒子 padding-top: 100px; 指定一个padding
 6         3 给父盒子一个overflow: hidden;
 7         .outer{
 8             width: 200px;
 9             height: 200px;
10             background-color: pink;
11             border-top: 1px solid transparent;
12         }
13         .inner{
14             width: 100px;
15             height: 100px;
16             background-color: yellow;
17             margin-top: 100px;
18         }*/
19        /* .outer{
20             width: 200px;
21             height: 100px;
22             background-color: pink;
23             padding-top: 100px;
24         }
25         .inner{
26             width: 100px;
27             height: 100px;
28             background-color: yellow;
29 
30         }*/
31         .outer{
32             width: 200px;
33             height: 200px;
34             background-color: pink;
35             overflow: hidden;
36         }
37         .inner{
38             width: 100px;
39             height: 100px;
40             background-color: yellow;
41             margin-top: 100px;
42 
43         }
44     </style>
45 </head>
46 <body>
47     <div class="outer">
48         <div class="inner"></div>
49     </div>
50 </body>

浮动：

　　float:left 左浮动

　　float:right 右浮动

清除浮动的三个方法：

 　　1) 内墙法，即在父元素中额外的添加一个盒子，给盒子设定样式为：clear: both。w3c推荐的方式

 1 <style>
 2         .box1{
 3             width: 100px;
 4             height: 100px;
 5             background-color: firebrick;
 6             float: left;
 7         }
 8         .box2{
 9             width: 100px;
10             height: 200px;
11             background-color:red;
12             float: left;
13         }
14         .outer .clearfix{
15             clear: both;/* 1：清除浮动*/
16         }
17     </style>
18 </head>
19 <body>
20 <!--
21     解决高度塌陷
22     1： w3c推荐的
23 
24 -->
25     <div class="outer">
26         <div class="box1"></div>
27         <div class="box2"></div>
28         <div class="clearfix"></div>
29     </div>
30 </body>

　　2) 父元素添加：overflow: hidden;

 1 <style>
 2         /*2：解决高度塌陷 在父盒子里面添加样式*/
 3         .outer{
 4             overflow: hidden;
 5         }
 6         .box1{
 7             width: 100px;
 8             height: 100px;
 9             background-color: firebrick;
10             float: left;
11         }
12         .box2{
13             width: 100px;
14             height: 200px;
15             background-color:red;
16             float: left;
17         }
18 
19     </style>
20 </head>
21 <body>
22 <!--
23     解决高度塌陷
24    2：
25 
26 -->
27     <div class="outer">
28         <div class="box1"></div>
29         <div class="box2"></div>
30 
31     </div>
32 </body>

 　　3) 双伪元素浮动(腾讯、小米均在使用)

 1 .clearfix:before,.clearfix:after {
 2     content: "";
 3     display: table;
 4 }
 5 .clearfix:after {
 6     clear: both;
 7 }
 8 .clearfix {
 9     *zoom: 1;
10 }

posted on 2020-04-02 23:07 代码吴彦祖阅读(330) 评论(0) 编辑收藏举报