## 前端面試題
1、簡述以下常見標簽的語義以及默認的display值：p, li, ul, form, b，img，這幾個dispaly值的區別是什么？
p 段落 display: block;
li 列表 display: block;
ul 列表 display: block;
form 表單 display: block;
b 粗體 display: inline;
img 圖片 display: inline-block;
區別：
block元素
1、如果沒有設置寬度會自動填滿父容器
2、可以應用margin/padding
3、如果沒有設置高度會拓展高度，包含常規流子元素
4、處於常規流前后元素獨占水平空間
5、忽略vertical-align
inline元素
1、水平方向從左到右依次布局
2、margin/padding 在垂直方向無效，在水平方向有效
3、不會再元素前后換行
4、浮動或絕對定位自動轉換成 block
5、vertical-align屬性無效
6、元素寬度由元素內容決定
inline-block 元素
1、可以設置寬高
2、其他基本同 inline元素屬性
2、寫一個布局：要求：整體尺寸等於瀏覽器窗口的尺寸，設置最小高度和最小寬度，
頂欄高度固定50px, 側欄寬度固定200px, 內容部分占據剩余的空間，
如圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
font: normal 14px "Microsoft YaHei";
}
html,body {
height: 100%;
overflow: hidden;
border: none;
}
.layout {
position: relative;
z-index: 0;
min-width: 1260px;
min-height: 600px;
}
.layout-top {
height: 50px;
width: 100%;
border:1px solid #000;
}
.layout-sider {
position: absolute;
left: 0;
top: 50px;
bottom: 0;
width: 200px;
float: left;
border-right: 1px solid #000;
}
.accordion {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
height: auto;
overflow-y: auto;
overflow-x: hidden;
}
.accordion .accordion-menus {
text-align: center;
font-size: 1em;
}
.accordion .accordion-menus li {
height: 40px;
line-height: 36px;
transition: border-left 220ms ease-in;
}
.layout-right {
position: absolute;
left: 200px;
top: 50px;
right: 0;
bottom: 0;
}
</style>
<body class="layout">
<div class="layout-top"></div>
<div class="layout-sider">
<div class="accordion">
<ul class="accordion-menus">
<li>caidan1</li>
<li>caidan2</li>
</ul>
</div>
</div>
<div class="layout-right">
<iframe id="rightMain" scrolling="auto" frameborder="0" src="" style="width:100%;height:100%;"></iframe>
</div>
</body>
</html>
3、有哪些方法可以隱藏元素？
1、display:none;
2、visibility: hidden;
3、opacity: 0;
4、什么是跨域？都有哪些方式可以進行跨域？
跨域就是不同域名下的通信來往。
跨域方式：
1、jsonp 請求
2、 HTML5新規范的CORS功能,只要目標服務器返回請求頭部**Access-Control-Allow-Origin: *** 即可
3、通過內部服務器代理，實現跨域
4、<img>,<script>,<link>,<iframe>，通過src，href屬性設置為目標url,實現跨域請求
5、簡述jsonp的原理
通過<script>標簽沒有跨域限制來進行數據交互。
就是提供一個回調函數接受json數據，在瀏覽器中執行並處理穿過來的數據。
6、如何設計一個輪播插件，用偽代碼簡述思路
初始化讓所有的圖片樣式
z-index:0,display:none
默認第一個圖片顯示 z-index:4,display:block
t = setInterval(move, 5000);
function move() {
num++;
if (num == imglen) {
num = 0;
};
show(num);
};
function show(index) {
給index當前元素添加活動類顯示隱藏
}
鼠標放在容器時，清除t，離開繼續執行 t = setInterval(move, 5000);
7、如何實現一個移動端"tap"事件
function tap(d,callback) {
var startTime = 0,
delayTime = 200,
isMove = false;
d.addEventListener("touchstart",function(){
startTime = Date.now();
},false)
d.addEventListener("touchmove",function(){
isMove = true;
},false)
d.addEventListener("touchend",function(){
if(isMove) return;
if(Date.now()-startTime>delayTime) return;
callback();
},false)
}
8、前端有哪幾種本地存儲方式，簡述各自的特點
localStorage、 sessionStorage、 cookie、web sql
localStorage:
1、有效期永久
2、同源可以讀取並修改localStorage數據
sessionStorage:
1、有效期頂層窗口關閉前
2、值允許同一窗口訪問
cookie：
1、有效期可以設置
2、cookie作用域通過文檔源和文檔路徑來確定
3、儲存數據量小
web sql：
1、可以儲存大量結構化數據
9、寫一個js函數，實現對一個數字每3位加一個逗號，如輸入100000， 輸出100,000
function farmat(mun) {
if (mun === null) return;
var m = parseInt(mun).toString();
var len = m.length;
if (len <= 3) return m;
var n = len % 3;
if (n > 0) {
return m.slice(0,n)+","+m.slice(n,len).match(/\d{3}/g).join(",")
} else {
return m.slice(n,len).match(/\d{3}/g).join(",")
}
}
var a =farmat(100000)
console.log(a);
10、簡述常見的http狀態碼
200 請求成功
404 Not Found
500 服務端錯誤
11、什么是事件代理，它的實現原理是什么？
通過事件冒泡，指定一個事件處理程序，就可以管理某一類型事件。
原理就是事件從最深節點開始逐步向上傳播事件。