8.28_the end

HomeWork

the first level

1. 盒模型

#parent {
            width: 100px;
            height: 100px;
            background:black;
            overflow: hidden;
        }

        #child {
            height: 100px;
            border-left: 10px solid yellow;
            padding-right: 10px;
            padding-left: 10px;
            margin-left: 10px;
            background: red;
        }

效果圖以下：

盒模型以下：

2. 定位，relative

position：relative，定位的起始位置是該元素原先在文檔流的位置。

3. 瀏覽器渲染原理

瀏覽器的渲染過程：下載html—＞解析DOM樹—＞渲染樹—＞帶位置和形狀信息的渲染樹（佈局）—＞可見圖形（渲染）
分析：下載過程當中，不只僅是一個文件，包括img，frame，script，

渲染的流程基本上以下（黃色的四個步驟）：

• 計算CSS樣式
• 構建Render Tree
• Layout – 定位座標和大小，是否換行，各類position, overflow, z-index屬性 ……
• 正式開畫

4. http協議狀態碼

1xx（臨時響應） 表示臨時響應並須要請求者繼續執行操做的狀態代碼
2xx （成功） 表示成功處理了請求的狀態代碼。
3xx （重定向） 表示要完成請求，須要進一步操做。 一般，這些狀態代碼用來重定向
4xx（請求錯誤）表示請求可能出錯，妨礙了服務器的處理。
5xx（服務器錯誤）表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤多是服務器自己的錯誤，而不是請求出錯。

5. TCP三次握手，可靠性？

6. CSS3動畫，怎麼處理CSS3兼容？動畫卡的緣由，key frame ,setTimeout不許

7. 迴流和重繪

Repaint——屏幕的一部分要重畫，好比某個CSS的背景色變了。可是元素的幾何尺寸沒有變。

Reflow——意味着元件的幾何尺寸變了，咱們須要從新驗證並計算Render Tree。是Render Tree的一部分或所有發生了變化。這就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式佈局，因此，若是某元件的幾何尺寸發生了變化，須要從新佈局，也就叫reflow）reflow 會從這個root frame開始遞歸往下，依次計算全部的結點幾何尺寸和位置，在reflow過程當中，可能會增長一些frame，好比一個文本字符串必需被包裝起來。
在一些高性能的電腦上也許還沒什麼，可是若是reflow發生在手機上，那麼這個過程是很是痛苦和耗電的。

因此，下面這些動做有很大可能會是成本比較高的。

• 當你增長、刪除、修改DOM結點時，會致使Reflow或Repaint
• 當你移動DOM的位置，或是搞個動畫的時候。
• 當你修改CSS樣式的時候。
• 當你Resize窗口的時候（移動端沒有這個問題），或是滾動的時候。

• 當你修改網頁的默認字體時。

• display:none會觸發reflow，而visibility:hidden只會觸發repaint，由於沒有發現位置變化。
  基本上來講，reflow有以下的幾個緣由：

• Initial。網頁初始化的時候。
• Incremental。一些Javascript在操做DOM Tree時。
• Resize。其些元件的尺寸變了。
• StyleChange。若是CSS的屬性發生變化了。

• Dirty。幾個Incremental的reflow發生在同一個frame的子樹上。

8. 閉包

閉包是指有權訪問另外一個函數做用域中的變量的函數，建立閉包的常見方式：在一個函數內部建立另外一個函數。
封裝、命名污染

9. BFC，overflow

10. Gulp，grunt構建,後臺瞭解

11. 模塊化的做用

複用性、團隊協做

12. 事件委託

13. 解決過的技術難題，深刻思考過程？

the second level

1. 盒模型

2. 兩欄佈局（名片：左列自適應，右列定寬，高度一致，內容自適應，ul>li浮動，省略號，清除浮動，左對齊）

省略號

ext-overflow:ellipsis;
white-space:nowrap; //強制文本在一行內顯示
overflow:hidden;

一列定寬一列自適應
若是是兩列布局：能夠直接把浮動的元素寫在不浮動的元素前面
方法一：float

方法二：負margin

方法三：定位

3. inline block間隙

CSS的元素分類中能夠分紅三種：行內元素（內聯元素）、塊級元素、以及內聯塊元素

• inline-block兼容性
  （1）inline level的元素
  對於內聯元素(inline element)，全部主流瀏覽器都支持直接設置display 的value值爲inline-block來將其定義爲內聯塊。

（2）block level的元素
IE7及如下瀏覽器對塊級元素(block element)的支持並不徹底，它們只支持用display:inline-block去定義一個inline level的元素爲內聯塊。先將block level元素設置爲inline，而後再去觸發該元素的hasLayout，使其擁有和inline-block類似的特性。能夠這樣寫：

<div id="demo">
    <div>我是一個div</div>
    <div>我是一個div</div>
    <div>我是一個div</div>
    <div>我是一個div</div>
</div>

#demo div{
    display:inline-block;
    *display:inline; /*IE7 hack*/
    *zoom:1; /*觸發hasLayout*/
}

• 縫隙的緣由
  W3C中規定如下元素屬於空白符：

ASCII 空格 ( )

ASCII 製表符 ( )

ASCII 換頁符 ( )

零寬度空格 ()
W3C中規定
一、折行被定義爲一個回車，一個換行符，或者一個回車、換行的組合，全部的換行構成了空白行。
二、對於多個連續的空白符（空格、換行符、回車符），瀏覽器會將他們合併爲一個空白符。

方法一：移除標籤間的空格，寫成一行
方法二：取消標籤閉合
例如在美團webapp頁面中貌似也是用到了這種方法。能夠看下：

方法三：使用font-size:0;
在父容器上使用font-size:0;能夠消除間隙，能夠這樣寫:

<div class="demo">
        <span>我是一個span
        <span>我是一個span
        <span>我是一個span
        <span>我是一個span</span>
    </div>

.demo {font-size: 0;}
    .demo span{
         background:#ddd;
         display: inline-block;
         font-size: 14px; /*要設置相應的字號*/
    }

4. 清除浮動原理