1、CSS中盒子模型的计算方式
.box{
box-sizing: content-box/border-box;
}
content-box:一个盒子的总宽=margin+border+padding+width
即width只是指盒子中内容的宽度
border-box:一个盒子的总宽=margin+width
即width中包含内容、padding、border的宽度之和
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 /*box-sizing: content-box;*/ 9 box-sizing: border-box; 10 } 11 .parent{ 12 width: 600px; 13 height: 400px; 14 background-color: #bff; 15 } 16 .child1{ 17 float: left; 18 width: 300px; 19 height: 100px; 20 background-color: #fbf; 21 border: 5px solid #333; 22 /*margin-left: 1px;*/ 23 padding: 5px; 24 } 25 .child2{ 26 float: left; 27 width: 300px; 28 height: 100px; 29 background-color: #ffb; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="parent"> 35 <div class="child1">MMMM</div> 36 <div class="child2"></div> 37 </div> 38 </body> 39 </html>
2、子元素的margin-top/margin-bottom的越界问题
解决方案：
a、给父元素加边框 -- 有副作用
b、给父元素加 margin-top:0; -- 无效
c、给父元素加 padding-top:1px; -- 有副作用
d、给父元素加 overflow:hidden -- 有副作用
e、给父元素添加内容生成：
.parent:before{
content: ' ';
display: table;
}
注：显示模式display取值，可以为table
显示模式为table时，若table中没有元素，则不占一行，但不允许其兄弟元素与其处于同一行
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 box-sizing: border-box; 9 } 10 .parent1,.parent2{ 11 width: 600px; 12 height: 200px; 13 } 14 .parent1{ 15 background-color: #aaf; 16 } 17 .parent2{ 18 background-color: #afa; 19 /*border: 1px solid transparent;*/ 20 /*margin-top: 0;*/ /*无效*/ 21 /*padding-top: 1px;*/ 22 /*overflow: hidden;*/ 23 } 24 .parent2:before{ 25 content: ' '; 26 display: table; 27 } 28 .child{ 29 width: 100px; 30 height: 50px; 31 background-color: #faf; 32 margin-top: 10px; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="parent1"></div> 38 <div class="parent2"> 39 <div class="child">I am a child</div> 40 </div> 41 </body> 42 </html>
3、子元素全部浮动后父元素高度为0
解决方法：
a、给父元素加 overflow:hidden; -- 有副作用
b、在父元素的最后添加内容生成：
.parent:after{
content: ' ';
display: table;
clear:both;
}
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 box-sizing: border-box; 9 } 10 .parent1{ 11 width: 600px; 12 /*height: 200px;*/ 13 background-color: #aaf; 14 /*overflow: hidden;*/ 15 } 16 .parent1:after{ 17 content: ' '; 18 display: table; 19 clear:both; 20 } 21 .child1, .child2, .child3{ 22 float: left; 23 width: 150px; 24 border: 1px solid #000; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="parent1"> 30 <div class="child1">111</div> 31 <div class="child2">222</div> 32 <div class="child3">333</div> 33 </div> 34 <hr> 35 </body> 36 </html>