一项阴、HTML
1喊式、重排和重繪
瀏覽器下載完頁面的所有組件（html、js兽狭、css憾股、圖片）后，會解析并生成兩個內部數據結構：
DOM樹——表示頁面結構
渲染樹——表示DOM節(jié)點如何顯示
DOM樹中每一個需要顯示的節(jié)點在渲i染樹中至少存在一個對應的節(jié)點箕慧。一旦DOM樹和渲染樹構建完成服球，瀏覽器就開始“繪制”頁面元素。
當DOM的變化影響了元素的幾何元素（寬和高）颠焦，就要重新構造渲染樹斩熊，這個過程稱之為“重排”；
完成“重排”后蒸健，瀏覽器會重新繪制受影響部分的元素到屏幕中座享，這個過程稱為“重繪”婉商。
重排何時發(fā)生
在頁面布局和幾何元素改變時，就需要“重排”渣叛。有下列幾種情況：
1.添加或刪除可見的DOM元素丈秩；
2.元素位置發(fā)生改變
3.元素尺寸改變（margin、padding淳衙、border蘑秽、width、height等）箫攀；
4.內容改變肠牲，例如文本改變或圖片用另外一個不同尺寸的圖片替代；
5.頁面渲染器初始化靴跛；
6.瀏覽器窗口尺寸改變缀雳。
根據改變的范圍和程度，渲染樹中或多或少的對應的部分需要重新計算梢睛，有時會觸發(fā)整個頁面的重繪肥印，例如：當滾動條出現。
不要在布局信息改變時查詢绝葡，改變完成后深碱，統(tǒng)一查詢。
最小化重排和重繪
重排和重繪代價昂貴藏畅，盡量減少次數敷硅，應該合并多次對DOM和樣式的修改。
一愉阎、改變樣式
二绞蹦、批量修改DOM
緩存布局信息
讓元素脫離動畫流
2、Meta標簽中的viewport屬性及含義
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
Viewport含義：
手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中诫硕，通常這個虛擬的“窗口”（viewport）比屏幕寬坦辟，這樣就不用把每個網頁擠到很小的窗口中刊侯，也不會破壞沒有針對手機瀏覽器優(yōu)化的網頁的布局章办，用戶可以通過平移和縮放來看網頁的不同部分。
屬性：
| 屬性名 | 內容 |
|---|---|
| width | 控制viewport的大小滨彻，可以指定一個值藕届，如600， 或者特殊的值亭饵，如device-width休偶，為設備的寬度（單位是縮放為100%的CSS的像素） |
| height | 和width相對應，指定高度 |
| initial-scale | 初始縮放比例辜羊，頁面第一次加載時的縮放比例 |
| maximum-scale | 允許用戶縮放到的最大比例踏兜，范圍從0到10.0词顾，（如果是1.0將禁止用戶放大到實際尺寸之上） |
| minimum-scale | 允許用戶縮放到的最小比例，范圍從0到10.0 碱妆，（1.0同理上） |
| user-scalable | 用戶是否可以手動縮放：①yes肉盹、 true允許用戶縮放；②no疹尾、false不允許用戶縮放 |
3上忍、CSS標準盒子 （box-sizing）（轉載：css 盒子模型）
一、盒模型
標準盒模型=內容（width）+內邊距（padding）+邊框（border）+外邊距（margin）纳本；
（IE盒模型=內容（width）+內邊距（padding）+邊框（border）+外邊距（margin）窍蓝；
但是內容width包含了padding和border部分）
元素總寬度=元素內容width+padding左右內邊距+border左右寬度+margin左右外邊距的值；
元素總高度=元素內容height+padding上下內邊距+border上下寬度+margin上下外邊距的值繁成；
二吓笙、css上下外邊距合并
兩個上下方向相鄰的元素框垂直相遇時，外邊距會合并巾腕，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距中較高的那個邊距值观蓄。如圖：
三、box-sizing屬性
box-sizing屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素祠墅。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默認值侮穿，可以使設置的寬度和高度值應用到元素的內容框。盒子的width只包含內容content毁嗦。
即總寬度=margin+border+padding+width
(2) border-box , 設置的width值其實是除margin外的border+padding+element的總寬度亲茅。盒子的width包含border+padding+內容content
即總寬度=margin+width
很多CSS框架，都會對盒子模型的計算方法進行簡化狗准。
(3) inherit , 規(guī)定應從父元素繼承 box-sizing 屬性的值克锣。
關于border-box的使用：
1 一個box寬度為100%，又想要兩邊有內間距腔长，這時候用就比較好
2 全局設置 border-box 很好袭祟，首先它符合直覺，其次它可以省去一次又一次的加加減減捞附，它還有一個關鍵作用——讓有邊框的盒子正常使用百分比寬度巾乳。
四、實際開發(fā)中遇到的與盒模型相關的應用及小知識
1鸟召、瀏覽器之間的盒模型問題
（1）ul標簽在Mozilla中默認是有padding值的胆绊，而在IE中只有margin有值。
（2）標準盒子模型與IE模型之間的差異：
標準的盒子模型就是上述介紹的那種欧募，而IE模型更像是 box-sizing : border-box; 其內容寬度還包含了border和padding压状。解決辦法就是：在html模板中加doctype聲明。
2跟继、margin越界（第一個子元素的margin-top和最后一個子元素的margin-bottom的越界問題）
以第一個子元素的margin-top 為例：
當父元素沒有邊框border時种冬，設置第一個子元素的margin-top值的時候镣丑，會出現margin-top值加在父元素上的現象，解決方法有四個：
（1）給父元素加邊框border （副作用）
（2）給父元素設置padding值 （副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置內容生成娱两。（推薦）
以第四種方法為例：
.parent {
width : 500px;
height : 500px;
background-color : red;
}
.parent : before {
content : " ";
display : table;
}
.child {
width : 200px;
height : 200px;
background-color : green;
margin-top : 50px;
}
<div class="parent">
<div class="child"></div>
</div>
圖片顯示,只有子元素才margin-top:50px：
不解決传轰，同時margin-top:50px：
3 用盒子模型畫三角形
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*這里可以設置border的top、bottom谷婆、left慨蛙、right四個方向的三角*/
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
頁面顯示結果為：
4、清除浮動
5纪挎、兩列布局（右側定寬200px,左邊隨屏幕自動填充寬度）
6期贫、水平垂直居中（轉載自：css 水平垂直居中）
1、水平居中
方法一：父元素為塊級元素异袄，將父元素設置為text-align：center通砍。將子元素設置為inline|inline-block（行內或行內塊元素）
示例代碼：
.parent1 {
text-align:center;
}
.child1 {
display:inline|inline-block;
}
方法二：父元素和子元素都為塊級元素，則將子元素設置寬度后烤蜕，設置margin：auto
代碼：
<main class="parent2">
<div class="child2">我是孩子2封孙，我要水平居中</div>
</main>
.child2 {
width:60%;
margin:auto;
}
方法三： 如果是多個子元素水平居中，則有兩種方法
3.1 將子級設置成行內或者行內塊元素讽营，父元素設置text－align屬性（見方法一））
3.2 將父元素設置display：flex
<main class="parent4">
<div class="child4">我是孩子4虎忌，我要水平居中</div>
<div class="child4">我是孩子4，我要水平居中</div>
<div class="child4">我是孩子4橱鹏，我要水平居中</div>
</main>
.parent4 {
display: flex;
justify-content: center;/*兩句代碼一起才有效果膜蠢，單用flex沒有用，目前還沒進入深層次研究*/
}
.child4 {
margin:10px;/*不設置全挨著一塊了*/
}
2莉兰、垂直居中
方法一：1 除了設置固定的padding值使其看起來垂直居中之外挑围，還可用line－h(huán)eight
將line－h(huán)eight和height的值設置為相同值，
<main class="parent5">
<div class="child5">我是孩子5糖荒，我要垂直居中</div>
</main>
.child5 {
height:50px;
line-height: 50px;
}
方法二： 如果是多行的杉辙，可以像table那樣，按照table cell 模式顯示捶朵，配合vertical－align
<main class="parent6">
<div class="child6">我是孩子6蜘矢，我要垂直居中</div>
<div class="child6">我是孩子6，我要垂直居中</div>
<div class="child6">我是孩子6泉孩，我要垂直居中</div>
</main>
.parent6 {
display: table;
}
.child6 {
display: table-cell;
border:2px solid #000;
vertical-align: middle;
}
方法三：通過絕對定位(子元素高度確定或者不確定兩種)
<main class="parent7">
<div class="child7">我是孩子7硼端，我要垂直居中</div>
</main>
/*如果知道子元素寬高*/
.parent7 {
position: relative;
height: 100px;
}
.child7 {
position: absolute;
top:50%;
height:60px;
margin-top:-30px;/*height一半值*/
}
/*如果不知道子元素寬高*/
.parent7 {
position: relative;
height: 100px;
}
.child7 {
position: absolute;
top:50%;
transform: translateY(-50%);
}
方法四：使用flex
<main class="parent8">
<div class="child8">我是孩子8，我要垂直居中</div>
</main>
.parent8 {
height: 200px;/*可填可不填*/
display: flex;
flex-direction: column;
justify-content: center;
}
3寓搬、水平垂直居中
方法一：使用絕對定位
<main class="parent9">
<div class="child9">我是孩子9，我要水平垂直居中</div>
</main>
/*如果不知道子元素寬高*/
.parent9 {
position: relative;
height: 150px;
}
.child9 {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);/*垂直居中只有translateY(-50%)*/
}
/*如果知道子元素寬高*/
.parent9 {
position: relative;
height: 150px;
}
.child9 {
position: absolute;
top:50%;
left:50%;
height:60px;
width:100px;
margin-left:-50px;/*width一半值*/
margin-top:-30px;/*height一半值*/
}
方法二：使用flex
.parent10 {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.child10 {
margin: auto;/*不設置占整行*/
}
上述所有圖片：
7县耽、addEventListener()有幾個參數句喷，是什么镣典？
addEventListener()方法用于向指定元素添加事件
element.addEventListener(event, function, useCapture) 有三個參數；
圖片來源：addEventListener()
一唾琼、JS
1兄春、typeof的類型（舉例說屬于什么類型）
詳細用法見typeof
2、function.prototype.bind()/call()/apply()的用法及區(qū)別
1锡溯、方法定義
call方法:
語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義：調用一個對象的一個方法赶舆，以另一個對象替換當前對象。
說明：
call 方法可以用來代替另一個對象調用一個方法祭饭。call 方法可將一個函數的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象芜茵。
如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj倡蝙。
apply方法：
語法：apply([thisObj[,argArray]])
定義：應用某一對象的一個方法九串，用另一個對象替換當前對象。
說明：
如果 argArray 不是一個有效的數組或者不是 arguments 對象寺鸥，那么將導致一個 TypeError猪钮。
如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj胆建， 并且無法被傳遞任何參數烤低。
使用1：
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1); //結果是alert(4)
使用2：
function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}
function Cat(){
this.name = "Cat";
}
var animal = new Animal();
var cat = new Cat();
//通過call或apply方法，將原本屬于Animal對象的showName()方法交給對象cat來使用了笆载。
//輸入結果為"Cat"
animal.showName.call(cat,",");
//animal.showName.apply(cat,[]);
這個例子中的意思就是用 add 來替換 sub拂玻，add.call(sub,3,1) == add(3,1) ，所以運行結果為：alert(4)宰译。
