css盒模型
1.题目：谈谈你对css盒模型的认识（从理论转化到应用）
- 基本概念：标准模型+ IE模型
border、margin、padding、content- 标准模型
- IE模型
1、标准模型和IE模型区别
1.计算宽度和高度的不同，怎么不同的，怎么计算的；
- 标准模型的宽度是：content的宽度，不包含padding和border；
- IE模型的宽度是：宽和高是计算 border 和 padding 的。
css如何设置这两种模型：
box-sizing:content-box;（标准模型--浏览器默认）
box-sizing:border-box;（IE模型）
JS如何设置获取盒模型对应的宽和高
1.dom.style.width/height(只能取内联样式的宽和高)
----getElementById('div').style.width/height
2.dom.currentStyle.width/height
(渲染之后的宽高--只有IE支持)
3.window.getComputedStyle(dom).width/height
(渲染之后的宽高--兼容性通用型更好一些)
4.dom.getBoundingClientRect().width/height
(适用场景：计算一个元素的绝对位置；这个绝对位置根据视窗
也就是左上角这个位置的绝对位置) 这个方法可以拿到四个元素：left top width height
实例题：（根据盒模型解释边距重叠）
一.要看父元素的盒模型怎么设置的：
1.父子元素边距重叠
overflow:hidden;解决重叠问题；相当于给父元素创建了一个BFC（块级格式化上下文）
eg:子元素高度为100px，距父元素顶部10px，计算父元素的高度？
1.因为父元素和子元素存在边距重叠，所以父元素高度为100px；
2.设置了overflow：hidden；之后父元素高度为110px；
2.兄弟元素边距重叠
兄弟元素每个都有上边距或者下边距，发生重叠原则取最大值；
eg:一个元素下边距为30px，下面那个元素上边距为5px，会合并成30px两者取最大值
3.空元素
空元素设置上下边距，margin-top\margin-bottom取一个最大值，作为它的一个边距
4.BFC（边距重叠解决方案）--另一种IFC
BFC基本概念：块级格式化上下文
- BFC的原理（渲染规则）：
1.在BFC这个元素的垂直方向的边距会发生重叠
2.BFC的区域不会与浮动元素的相重叠（清除浮动布局）
3.BFC在页面是一个独立的容器，外面的元素不会影响它里面元素，反过来一样
4.计算BFC高度的时候浮动元素也会参与计算
- 如何创建BFC？
1.overflow：hidden | auto | visible
2.float值不是null（只要有浮动，当前元素就创建了BFC）
3.position值不是static或者relative就创建了BFC（设置成absolute，fixed）
4.display属性是为inline-box，table-cell（也就是和table相关的）
- BFC使用场景有哪些？
1.父级元素里面有三个子元素，子元素margin：5px auto 25px;
之后就第一个元素的上边距是5，其他的都是25px，这有一个边距重叠的问题；在写页面布局的时候不想有这个重叠，就给子元素增加一个父元素，父元素创建一个BFC就能解决问题；
2.布局相关的BFC应用
- BFC垂直方向边距重叠
垂直方向三个p元素，p{margin:5px auto 25px},之后第二个第三个的上边距变成25px；发生了边距重叠，取得的是最大值；如果不想重叠，就需要再那个元素在加一个父级div，对父级div创建BFC（overflow：hidden）
- BFC不与float重叠
两栏布局，左边宽度固定左浮动height：100px，右边自适应height：120px;右边的高度增高的时候，右边的背景色已经侵染到了左侧，（当布局的时候左侧没有float元素，它依然会往左侵染），解决方法：给右侧元素创建一个BFC（overflow：atuo）
-
清除浮动；（BFC子元素即使是float元素也会参与计算）
.layout{background:orange} .float{float:left;} -->只看到.float的内容没看到父级的背景颜色；父级高度为0； --->一个普通的元素当子元素是float元素的时候，它的高度计算没有包含进来； .layout{background:orange;overflow:hidden;} .float{float:left;} --》给layout设置BFC之后，float内容有了背景颜色，父级有了高度； ---->当把外层元素设为BFC的时候，子元素的浮动元素也会参与父级的高度计算； BFC的元素在计算高度的时候会考虑内部子元素float
（子元素是float也不影响父元素高度的计算，它的内容页会被参与进来）--IFC（内联元素的格式化上下文）
