Q1: 页面布局
解决方案的优缺点：
1、浮动：脱离文档流，需要清除浮动。兼容性较好。
2、绝对定位：快捷。子元素脱离文档流，降低可使用性
3、flex布局：移动端使用较多。
4、表格布局：兼容性较好。
5、网格布局：新技术。
各种方案之间的比较，加入没有设置高度，哪个更适用：
flex布局和表格布局仍可以使用。
浮动的内容向左浮动时，被左侧的块遮挡。但是内容超出后，没有就会向左浮动。如果需要在中间块只在中间延伸，则需要创建BFC。
页面布局的变通：
Q2： CSS盒模型
设置这两种模型： 计算高度和宽度的不同。
box-sizing: border-box; //IE盒模型
box-sizing: content-box; //标准模型（浏览器默认方式）
1. dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
2. dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。
但这种方式只有IE浏览器支持。
3. window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
4. dom.getBoundingClientRect().width/height
返回元素的大小及其相对于视口的位置
5.dom.offsetWidth/offsetHeight
最常用的，也是兼容最好的。
var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
//IE、Opera
alert(oAbc.currentStyle.width);
} else {
//FF、chrome、safari
alert(getComputedStyle(oAbc,false).width);
}
// 兼容性获取元素的渲染后的宽高边距重叠： 1、父子元素（通过父元素设置overflow:hidden；） 2、兄弟元素：取最大值 3、空元素设置上边距和下边距：取最大值
BFC（块级格式化上下文）原理：即渲染规则
1、 垂直方向上的边距会发生重叠
2、 BFC的区域不会与浮动元素的box重叠（用来清除浮动）
3.、是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
4、 计算BFC高度时浮动元素也会参与计算
创建BFC：
1、设置float
2、position值为绝对定位或fixed
3、display:inline-block，table-cell
4、overflow:hidden;/auto
BFC的使用场景：
Q3：DOM事件
DOM事件级别：
事件模型：捕获、冒泡
事件流：事件通过捕获到达目标元素，再从目标元素冒泡到window对象
描述事件捕获的具体流程：从上到下。
如何用JS表示当前的html节点： document.documentElement
常见Event对象：
自定义事件：Custon