1.标准盒子模型和IE盒子模型
标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin 宽高指的是 content 的宽高
低版本IE盒子模型：内容（content+padding+border）+ 边界margin，
宽高指的是 content+padding+border 部分的宽高
2.CSS如何设置这两种模型
box-sizing : content-box
box-sizing : border-box
3.JS如何设置获取盒子模型对应的宽和高
dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置
4.margin塌陷/margin重叠
标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。
兄弟元素之间:
竖直方向的margin不叠加，以较大的为准
父子元素之间:
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
5.BFC
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
1.如何生成BFC
只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll) (常用)
2.BFC的原理/BFC的布局规则
BFC 内部的子元素，在垂直方向，边距会发生重叠。
BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。
计算BFC的高度时，浮动的子元素也参与计算。
3.BFC的应用
解决margin重叠
当父元素和子元素发生 margin 重叠时，解决办法：给子元素或父元素创建BFC
BFC区域不与float区域重叠
清除浮动
