常见前端面试题备注

1 iframe上监听click事件

iframe.onload = function () {
    this.contentDocument.body.onclick = function () {
        console.log(“hello world!~");
    }
}    

2 常见的布局方式

1 静态布局 px
2 流式布局 百分比 + em 或者 rem
3 自适应布局 media query
4 响应式布局 media query

3 同源策略

文档来源包括：协议 主机以及URL端口
三种不严格的同源策略
1 不同窗口同domain
     home.example.com(初始值) => example.com
2 跨域资源共享（cross origin resource sharing）
     Origin && Access-Control-Allow-Origin
3 跨文档信息
     不管文档的来源是否相同，调用window的postMessage广播消息

JSONP: 动态插入script标签，浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行

4 块级格式化上下文

作用：
1 阻止外边距折叠 
2 包含浮动元素 
3 阻止元素覆盖浮动元素
生成一个块级格式化上下文的方法
1 根元素或者包含根元素 body iframe
2 浮动 float
3 位置 position: fixed absolute
4 display: inline-block table-cell table-caption flex inline-flex
5 overflow

5 inline-block块间距

产生间距的原因: 行内块之间有空格或者换行符
解决方法：在父元素上设置font-size: 0

6 清除浮动的方法

构造块级格式化上下文 
空标签 clear: both 
容器伪元素::after { content: ""; display: block; clear: both;}