[TOC] # 2019/01/02 #### 1.**let/const/var的區別** * var：聲明全局變量，換句話理解就是，聲明在for循環中的變量，跳出for循環同樣可以使用。 ~~~ for(var i=0;i<=1000;i++){ var sum=0; sum+=i; } alert(sum); ~~~ 聲明在for循環內部的sum，跳出for循環一樣可以使用，不會報錯正常彈出結果 * let：聲明塊級變量，即局部變量。 在上面的例子中，跳出for循環，再使用sum變量就會報錯 注意：必須聲明'use strict'后才能使用let聲明變量否則瀏覽并不能顯示結果 * const：用于聲明常量，也具有塊級作用域 const PI=3.14; #### 2.**url到展示頁面發生了什么** 1. DNS解析 2. 建立TCP連接（3次握手） 3. 發送HTTP請求，從服務器下載相關內容 4. 瀏覽器構建DOM樹和CSS樹，然后生成渲染樹。這個一個漸進式過程，引擎會力求最快將內容呈現給用戶。 5. 在第四步的過程中，`<script>`的位置和加載方式會影響響應速度。 6. 搞定了，關閉TCP連接（4次握手） #### 3.**用CSS怎么做出一個三角形** ~~~ 把上、左、右三條邊隱藏掉（顏色設為 transparent） #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } ~~~ #### 4.**document.wirte和innerHTML的區別** 主要區別： * document.write是直接將內容寫入頁面的內容流，會導致頁面全部重繪 * innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪 #### 5.**柵格系統的原理** 實現原理： 1. 把網頁總寬度平分為12分，開發人員可以自由按分組合，以便開發出簡潔方便的程序 2. 僅僅通過定義容器大小、平分12分，再調整內外邊距，最后結合媒體查詢，就制作出強大的響應式柵格系統 3. 柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。 工作原理： 1. “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。 2. 通過“行（row）”在水平方向創建一組“列（column）”。 3. 你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。 4. 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。 5. 通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。 6. 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。 7. 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。 8. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。 #### 6.**position的值relative和absolute的定位原點是？** * absolute：生成絕對定位的元素，定位原點是離自己這一級元素最近的一級position設置為absolute或者relative的父元素的左上角為原點的。 * relative：生成相對定位的元素，定位原點是元素本身所在位置。 **拓展：** * fixed （老IE不支持）：生成絕對定位的元素，相對于瀏覽器窗口進行定位。 * static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。 * inherit：規定從父元素繼承 position 屬性的值。 已連接 1個文件被修改 面試日志記錄.md