面试知识点--CSS盒模型
1. 基本概念
完整定义DOCTYPE会触发标准模式，如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式。
（W3C）标准模型
一个块的宽度 = width(content宽度)+padding(内边距)+border(边框)+margin(外边距)；
（怪异）IE模型
一个块的宽度 = width(content宽度+内边距+边框)+margin(外边距) （即怪异模式下，width包含了border以及padding）;
2. 标准模型和IE模型的区别
标准盒子模型中，盒子的width是指content宽度，但IE盒子模型中，width包含了content、border和padding的宽度。
即主要区别在于width和height的计算方式的不同
标准盒子模型：盒子的总宽度 = width + padding + border + margin
width = content的宽度
IE 盒子模型 : 盒子的总宽度 = width + margin
width = content的宽度 + padding内边距(左右) + border边框宽度(左右)
（高度以此类推）
3. CSS如何设置这两种模型
- box-sizing:content-box; 标准模型（浏览器默认）
- box-sizing:border-box; IE模型
4. JS如何设置获取盒模型对应的宽和高
- dom.style.width/height（只能获取内联样式的宽高）
- dom.currentStyle.width/height（渲染显示的宽高，只支持IE浏览器）
- window.getComputedStyle(dom).width/height（兼容主流浏览器，通用性好）
- dom.getBoundingClientRect().width/height/left/top（计算元素的绝对位置，视窗的左上交为顶点）
5. BFC（边距重叠解决方案）
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
原理规则：
- 不会让垂直方向的边距发生重叠；
- BFC的区域不会与浮动元素发生重叠；
- BFC在页面上是独立容器，其里面的元素与外面元素互不影响；
- 计算BFC高度时，浮动元素也会参与计算；
如何创建BFC：
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table、table-cell、table-caption、flex、inline-flex
- overflow的值不是visible
使用场景：
解决高度塌陷问题------链接
还有一种IFC为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来的。
（本文纯属个人学习笔记，如有不足请留言！）