什么是盒模型
一个CSS盒模型由content、border、padding、margin组成，盒模型又分为标准模型和IE模型。标准模型和IE模型区别就是就是计算盒子的宽度和高度的不同
标准模型
标准模型的宽度和高度指的是content
实际例子
<style type="text/css"> .box{ width: 200px; height: 200px; border: 20px solid #FF9800; padding: 50px; margin: 50px; } </style> <div class="box"></div>
最外面橙色的就是外边距区域(margin area )，往里黄色的是边框区域(border area)，再往里的绿色的是内边距区域(padding area )，最里面绿色的就是内容区域（content area）了
即在标准模式下的盒模型：
盒子实际内容（content）的width/height=我们设置的width/height;
盒子总宽度/高度=width/height+padding+border+margin
IE模型
IE模型的宽度高度包括padding+border
实际例子
box{ width: 200px; height: 200px; border: 20px solid #FF9800; padding: 50px; margin: 50px; box-sizing: border-box; // 添加box-sizing 将其盒子设置为IE盒模型 } </style> <div class="box"></div>
即在IE盒模型
盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin
box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素，默认值是content-box，设置或检索对象的盒模型组成模式，对应的脚本特性为boxSizing
语法：box-sizing：content-box | padding-box | border-box
content-box（默认）
布局所占宽度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
JS获取盒模型对应的宽和高
document.getElementById('dom').style.width/height //(只适用获取内联元素的宽和高-写在标签上的)
document.getElementById('dom').currentStyle.width/height //(获取渲染后的宽高，但是仅IE支持)
window.getComputedStyle(dom).width/height //(与2原理相似，但是兼容性，通用性会更好一些)
document.getElementById('dom').getBoundingClientRect().widht/height //(计算元素绝对位置，获取到6个元素left,top,bottom,right,width,height,x,y)
BFC 的基本概念
Block Formatting Context, 块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规格来约束块级盒子的布局，且与区域外部无关
BFC 的原理
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3、每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算
如何创建BFC
1、postion 为absolute 和fixed的元素
2、float不为none的元素
3、overflow不为visible的元素
4、弹性元素（display为 flex 或 inline-flex元素的直接子元素）
5、网格元素（display为 grid 或 inline-grid 元素的直接子元素）
6、内联块元素，即display的值为inline-block的元素；
7、流式布局根元素，display值为flow-root的元素；
8、表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
利用BFC避免margin重叠
<!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>防止margin重叠</title> </head> <style> *{ margin: 0; padding: 0; } p { color: #f55; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } </style> <body> <p>看看我的 margin是多少</p> <p>看看我的 margin是多少</p> </body> </html>
页面效果
根据BFC规则，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC
<divstyle="overflow: hidden;"><p>看看我的 margin是多少p>div>
自适应两栏布局
<!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: 100px; float: left; background: rgb(139, 214, 78); text-align: center; font-size: 20px; } .right { height: 200px; background: rgb(170, 54, 236); text-align: center; font-size: 40px; } </style> <body> <div class="left">LEFT</div> <div class="right">RIGHT</div> </body> </html>
页面呈现效果
因为BFC的区域不会与float box重叠，所以让right，形成一个bfc，即添加 overflow: hidden;
.right { height: 200px; background: rgb(170, 54, 236); text-align: center; font-size: 40px; overflow: hidden; // 添加此行代码 }
清楚浮动
我们在开发者中，常常遇到，当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动
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规则，计算BFC的高度时，浮动元素也参与计算
.par { border: 5px solid rgb(91, 243, 30); width: 300px; overflow: hidden; }
margin塌陷
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>Documenttitle> <style> *{ margin: 0; padding: 0; } .outer{ width: 200px; height: 200px; background: red; } .inner{ width: 50px; height: 50px; background: blue; margin-top:50px; } style> head> <body> <div class="outer"> <div class="inner">div> div> body> html>
页面呈现效果如下，显然效果不一致，我们想要的效果是inner的margin-top相对.outer
解决问题，让outer盒子变成BFC元素，让里面inner单独处于一个BFC环境
.outer{ width: 200px; height: 200px; background: red; overflow: hidden; }
