常見前端面試題備註

1 iframe上監聽click事件

1 iframe.onload = function () {
2     this.contentDocument.body.onclick = function () {
3         console.log(「hello world!~");
4     }
5 }    

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 清除浮動的方法

1 構造塊級格式化上下文 
2 空標籤 clear: both 
3 容器僞元素::after { content: ""; display: block; clear: both;}