盒模型
自学前端2个月了，感觉没有什么实感，到底学到什么程度，才可以找到一份合适的工作，很迷茫。
只能总结自己所学，什么是盒模型呢？
网页中任何一个元素都可以视为一个盒子，由里到外，盒模型包括外边界（margin）、边框（border）、内边界（padding）和内容（content）。
盒模型基本分为3种：
CSS3属性 box-sizing
1、标准模型 content-box ， width = content
2、IE模型 border-box ，width = content + padding + border
3、padding-box
JS获得box宽高的方式：
1、dom.offsetWidth （最为实用）
2、window.getComputedStyle(dom).width
3、dom.style.width （只能获取行间样式）
4、dom.currentStyle.width （IE）
5、dom.getBoundingClientRect().width
边距重叠
1、父子关系边距重叠：子元素有边距，父元素没有边距，导致父元素会产生边距
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style> 8 .box { 9 width: 100px; 10 height: 100px; 11 background: #000000; 12 } 13 14 .child-box { 15 width: 50px; 16 height: 50px; 17 background: #f25d8e; 18 margin-top: 20px; 19 } 20 </style> 21 <body> 22 <section> 23 <div class="box"></div> 24 <div class="box"> 25 <div class="child-box"></div> 26 </div> 27 </section> 28 </body> 29 </html>
2、同级关系边距重叠：同级元素各自有上下边距时，垂直方向上下边距会重叠，取重叠后，2个元素的距离取较大的边距
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style> 8 .box { 9 width: 100px; 10 height: 100px; 11 background: #000000; 12 margin: 20px 0 50px; 13 } 14 </style> 15 <body> 16 <section> 17 <div class="box"></div> 18 <div class="box"></div> 19 </section> 20 </body> 21 </html>
解决父子关系边距重叠：
1、加入before
.box:before { content: ''; display: table; }
2、加入overflow:hidden
<div class="box" style="overflow: hidden"> <div class="child-box"></div> </div>
3、display:inline-block
<div class="box" style="display: inline-block"> <div class="child-box"></div> </div>
4、在对应位置padding
<div class="box" style="padding-top: 1px"> <div class="child-box"></div> </div>
5、在对应位置添加border
<div class="box" style="border-top: 1px solid #000;"> <div class="child-box"></div> </div>
6、浮动
.child-box { width: 50px; height: 50px; background: #f25d8e; margin-top: 20px; float: left; }
解决同级关系边距重叠：
1、浮动
<div class="box" style="float: left;">
2、inline-block
<div class="box" style="display: inline-block">
3、第二个元素添加一个父级，在父级添加overflow:hidden，转化成处理父级关系边距重叠， 同理用before也可以这么处理
<div class="box"></div> <div style="overflow: hidden"> <div class="box"></div> </div>
