一.CSS盒模型 标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。
css3属性box-sizing : content-box || border-box || inherit; content-box：标准盒模型 border-box：IE盒模型 inherit：继承父元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .contentbox { margin: 10px; padding: 10px; border: 5px solid red; box-sizing: content-box; width: 100px; height: 100px; } .iebox { margin: 10px; padding: 10px; border: 5px solid blue; box-sizing: border-box; height: 100px; width: 100px; } .default { margin: 10px; padding: 10px; border: 5px solid green; height: 100px; width: 100px; } </style> </head> <body> <div class="contentbox"> 标准盒模型 </div> <div class="iebox"> ie盒模型 </div> <div class="default"> 默认 </div> </body> </html>标准盒模型（默认情况） 设置的(width/height)就是内容部分的(宽/高) 总宽高 = (width/height) + padding + border + margin
IE盒模型 设置的width/height明明是100px，但是内容部分只有70px。原因在于IE盒模型中 (width/height) = content + padding + border 总宽高 = (width/height) + margin
扩展： **JavaScript两种获取元素宽高的方法（兼容性好）： offsetWidth/offsetHeight /clientWidth/clientHeight 1.offsetWidth/offsetHeight = content + padding + borde
console.log(document.getElementsByClassName('contentbox')[0].offsetWidth);// 130 console.log(document.getElementsByClassName('iebox')[0].offsetWidth);// 1002.clientWidth/clientHeight = content + padding
console.log(document.getElementsByClassName('contentbox')[0].clientWidth);// 120 console.log(document.getElementsByClassName('iebox')[0].clientWidth);// 90二.BFC 定义： BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
如何创建BFC 1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible
BFC的作用 1.利用BFC避免margin重叠，避免重复的margin取最大的原则，BFC让两个margin相加
2.自适应两栏布局:right会自动的适应宽度，这时候就形成了一个两栏自适应的布局 float布局缺点，使用BFC之前：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> *{ margin: 0; padding: 0; } body { width: 100%; position: relative; } .left { width: 100px; height: 150px; float: left; background: rgb(139, 214, 78); text-align: center; line-height: 150px; font-size: 20px; } .right { height: 300px; background: rgb(170, 54, 236); text-align: center; line-height: 300px; font-size: 40px; } </style> <body> <div class="left">LEFT</div> <div class="right">RIGHT</div> </body> </html>使用BFC之后：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> *{ margin: 0; padding: 0; } body { width: 100%; position: relative; } .left { width: 100px; height: 150px; float: left; background: rgb(139, 214, 78); text-align: center; line-height: 150px; font-size: 20px; } .right { overflow: hidden; height: 300px; background: rgb(170, 54, 236); text-align: center; line-height: 300px; font-size: 40px; } </style> <body> <div class="left">LEFT</div> <div class="right">RIGHT</div> </body> </html>3.清楚浮动 使用BFC之前：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动</title> </head> <style> .par { border: 5px solid rgb(91, 243, 30); width: 300px; } .child { border: 5px solid rgb(233, 250, 84); width:100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body> </html>使用BFC之后：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动</title> </head> <style> .par { border: 5px solid rgb(91, 243, 30); width: 300px; overflow: hidden; } .child { border: 5px solid rgb(233, 250, 84); width:100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body> </html>总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
