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