基本概念页面上的每个元素都可以看作是一个盒子，盒子里面可以放置其他的盒子，层层嵌套。html标签是最外面的大盒子。每个盒子从里到外都是content,padding,border,margin。分类盒模型有两种，标准盒模型和IE盒模型。主要区别在于它们的宽度和高度。标准盒子模型盒子的宽高是内容（content）的宽高。IE盒子模型盒子的宽高是border+padding+content的宽高。浏览器默认使用标准盒模型，在ie8+可以通过设置box-sizing样式属性改变盒模型
box-sizing:content-box--->标准盒模型（默认）border-box--->IEboxmodel通过js获取框的宽高，后面的domElement是表示一个HTML元素的伪代码domElement.style.width/height只能获取inline中的宽高风格。domElement.currentStyle.width/height获取元素在浏览器渲染后的宽高。仅IE浏览器支持window。getComputedStyle(domElement).width/height同方法二，但是可以兼容更多的浏览器。domElement.offsetWidth/offsetHeight无论使用什么盒模型，获取的都是IE盒模型的宽高。垂直方向的边距相遇时会合并，合并后的边距高度等于两个边距中较大的值。兄弟元素和父子元素之间的边距折叠解决方案（BFC）BlockFormattingContext（块级格式化上下文）BFC可以简单理解为一个元素的CSS属性，但是这个属性不能被开发者显式修改，元素带有这个attribute会对内部元素和外部元素表现出一些特性，这就是BFC。如何创建元素BFCfloatvalueisnotnone(floatingelement)overflowvalueisnotvisibledisplayvalueinline-block,table-caption,table-cell,flex,inline-flexpositonvalueisabsoluteorfixed(Rootelement)boxesBFC的布局规则里面会在垂直方向一个接一个的放置（块级元素通常是排成一行）。框之间的垂直距离由边距决定。同一个BFC中的两个相邻框仍然会存在边距重叠的问题。BFC的区域不会与浮动框重叠。BFC是一个独立的容器，里面的元素不会影响外面的元素，反之亦然。包含浮动元素，在计算BFC的高度时，浮动元素也会参与BFC应用场景的计算。属于不同BFC的元素可以防止垂直边距塌陷和清除内部浮动（这样浮动元素可以支撑父框）自适应两列布局（BFC区域不会与浮动元素重叠）防止元素被覆盖浮动元素float+BFC两列布局：
