盒子模型的坑：
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 }