一仓手、css的position屬性有哪些取值攻礼，它們的行為是什么业踢？
1）取值
- position的取值有static、relative礁扮、absolute知举、fixed、inherit太伊、sticky雇锡。
2）行為：
-
static標(biāo)準(zhǔn)文檔流，從左到右僚焦，自上而下排列锰提； -
relative相對(duì)于自身移動(dòng)。 -
absolute相對(duì)于離它最近的 position 屬性為 absolute芳悲、relative或者 fixed 移動(dòng)立肘。 -
fixed相對(duì)于body移動(dòng)。 -
inherit繼承父級(jí)的position屬性名扛。 -
sticky正常情況是static谅年，超過(guò)設(shè)置的top，left變成fixed定位肮韧。
3）為何會(huì)產(chǎn)生這些行為融蹂，上面各種相對(duì)物都稱為包含塊（containing block）。
-
static弄企、relative的包含塊是它最近的塊級(jí)超燃、單元格或者行內(nèi)塊祖先元素的content區(qū)域創(chuàng)建。相對(duì)的移動(dòng)也比較簡(jiǎn)單拘领。 -
fixed的包含塊是當(dāng)前可視窗口淋纲，可認(rèn)為是body。 -
absolute的包含塊是離它最近的 position 屬性為 absolute院究、relative或者 fixed或者body洽瞬。
當(dāng)absolute包含塊是塊級(jí)元素本涕，行內(nèi)塊，那么相對(duì)于包含塊的內(nèi)邊距邊界移動(dòng)伙窃，即我們熟知的左上方菩颖，有下方移動(dòng)。
當(dāng)absolute是行內(nèi)元素为障，那么取決于direction屬性晦闰，有l(wèi)tr（從左到右排版），rtl（從右到左排版）鳍怨，包含塊的寬度減少幾個(gè)像素呻右，一半寬度，甚至為負(fù)數(shù)鞋喇，所以堅(jiān)決不能用行內(nèi)元素當(dāng)做包含塊声滥。
4） position跟display、margin collapse侦香、overflow落塑、float這些特性相互疊加后的行為。
先看display重置規(guī)則：
| 設(shè)置值 | 轉(zhuǎn)換值 |
|---|---|
| inline-table | table |
| inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
| 其他 | 同設(shè)定值 |
-
display 的值為 none：position與float不起作用罐韩。 -
position 的值是 absolute 或 fixed：當(dāng)元素是絕對(duì)定位時(shí)憾赁，浮動(dòng)失效，'display' 會(huì)被按規(guī)則重置散吵。 -
float存在：浮動(dòng)元素大部分變成display:block
參考文獻(xiàn)：http://www.w3help.org/zh-cn/kb/ 和 https://www.cnblogs.com/jackyWHJ/p/3756087.html
二龙考、為什么盡量別用setInterval？
- setInterval無(wú)視代碼錯(cuò)誤矾睦；即使setInterval內(nèi)有錯(cuò)誤洲愤，還是繼續(xù)執(zhí)行，不暫停顷锰。
- setInterval無(wú)視網(wǎng)絡(luò)延遲柬赐；即使你接口一直沒請(qǐng)求成功，還是會(huì)輪詢官紫，最終你的客戶端網(wǎng)絡(luò)隊(duì)列會(huì)塞滿Ajax調(diào)用肛宋。
- setInterval不能保證代碼一定執(zhí)行；在輪詢時(shí)間結(jié)束時(shí)束世，你某些函數(shù)還沒執(zhí)行酝陈，就會(huì)被忽略。
-
setInterval不自由毁涉；無(wú)法設(shè)置你輪詢的開始和結(jié)束條件沉帮。
解決方法：使用setTimeout遞歸，這里提供個(gè)小例子：
const f = () => {
if (true) {
setTimeout(f, 5000)
}
}
setTimeout(f(), 5000);
webpack打包添加版本號(hào)
https://segmentfault.com/q/1010000004651295
三、必考原型繼承相關(guān)內(nèi)容穆壕？
1）
我們以 var p = new Person 為例來(lái)說(shuō)：
var obj = {}
obj.__proto__ = Person.prototype
Person.call(obj)
var p = obj
簡(jiǎn)單來(lái)說(shuō)：創(chuàng)建一個(gè)空對(duì)象obj，將Person的prototype屬性賦予obj喇勋，通過(guò)call將Person的this指向obj缨该。
2）
Object.create = function (obj) {
var F = function () {};
F.prototype = obj;
return new F();
};
簡(jiǎn)單來(lái)說(shuō)：就是建一個(gè)空函數(shù)F川背，F(xiàn).prototype=obj贰拿，然后返回F的實(shí)例。
這樣的好處就是可防止多次調(diào)用父的實(shí)例熄云，經(jīng)典場(chǎng)景：寄生組合式繼承膨更。
3）
看如下例子：
// 第一種
function Person() {
this.name=name;
this.getName=function() {
console.log(this.name)
}
}
// 第二種
function Person() {
this.name=name;
}
Person.prototype.getName=function() {
console.log(this.name)
}
第二種的好處就是缴允，每一次調(diào)用實(shí)例new Person()荚守，都不會(huì)觸發(fā)getName方法，只有需要調(diào)用才觸發(fā)癌椿，提升了性能健蕊；而第一種調(diào)用實(shí)例就會(huì)觸發(fā)一次菱阵。
未完待續(xù)...
