「寒冬」三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等） 的嘗試性解答

原貼地址：
「寒冬」三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）

樓主給了題目，但沒有解答，本身嘗試解答一波，若是有錯誤請指正~。

CSS篇：

1. 盒模型 瀏覽器右鍵便可看到盒模型：
   最外層是 margin
   而後是 border
   而後是 padding
   而後是 content

2. 垂直居中

   <style> /* flex 方式 */ .one { display: flex; align-items: center; width: 500px; height: 500px; background: #000; } .two { height: 200px; width: 200px; background: #fff; } </style>
   <div class="one">
       <div class="two">
       </div>
   </div>
   /* position 方式 */
   <style> .one { width: 500px; height: 500px; background: #000; position: relative; } .two { height: 200px; width: 200px; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); } </style>
   <div class="one">
       <div class="two">
       </div>
   </div>
   
   /* 自適應margin */
   <style> .one { width: 20vw; height: 20vh; margin: 40vh 40vw; background: black; } </style>
   <div class="one">
   </div>    
   複製代碼

3. 三欄佈局

   /* 利用flex-grow和flex-basis */
   <style type="text/css"> .body { display: flex; width: 100vw; height: 100vh; } .one { background: yellow; flex-basis: 100px; } .two { background: pink; flex-grow: 1; } .three { background: orange; flex-basis: 200px; } </style>
   
   <div class="body">
       <div class="one"></div>
       <div class="two"></div>
       <div class="three"></div>
   </div>
   複製代碼

4. CSS選擇器權重計算方式 CSS選擇器方面優先級：

   1. 最高級的是帶有 !importrant 的樣式。
   2. 第二級是內聯樣式直接定義在style裏的。
   3. 第三級是id選擇器#id。
   4. 第四級是class選擇器.class。
   5. 第五級是僞類選擇器.class:hover。
   6. 第六級是屬性選擇器a[href][title]。
   7. 第七級是標籤選擇器div。
   8. 第八級是通配符*。
   9. 最後還有瀏覽器自定義的。 權重計算方面： 查了些資料瞭解到：
      1. !important 樣式的權重無窮大。
      2. 內聯樣式權重爲 1000。
      3. id選擇器權重爲 100。
      4. class/僞類/屬性選擇器權重爲 10。
      5. 標籤是 1。
      6. 通配符是0。 例子：

   <style>
       * {
           color: orange;
           /* 權重是 0 */
       }
       a {
           color: black; 
           /* 權重爲 1 */
       }
       div a {
           color: green;
           /* 權重爲 2 */
       }
       a[href] {
           color: yellow;
           /* 權重爲 10 */
       }
       #one {
           color: gray;
           /* 權重是 100 */
       }
       .two {
           color: blue !important;
           /* 權重是 無窮大 */
       }
       .three {
           color: rgb(123,123,123);
           /* 權重 10 */
       }
   </style>
   <a>這一條是黑色的</a>
   <div>
       <a>這一條是綠色的</a> 
       <a href="javascript:;">這一條是黃色的</a>
       <a href="javascript:;" id="one">這條是灰色的</a>
       <a href="javascript:;" style="color: pink;">這條是粉色的</a>
       <a href="javascript:;" style="color: pink;" class="two">這條是藍色的</a>
       <a href="javascript:;" style="color: pink;" class="three">這條又是粉色的</a>
   </div>
   複製代碼

5. 清除浮動的方法
   先了解下不清除浮動

   <style> * { margin: 0; padding: 0; } .header { width: 100vw; height: 20vh; background: black; } .body-one { width: 49vw; height: 20vh; background: pink; float: left; } .body-two { width: 49vw; height: 15vh; background: yellow; float: right; } .footer { width: 100vw; height: 21vh; background: orange; } </style>
   <div class="header">
   </div>
   <div class="body-one">
   </div>
   <div class="body-two">
   </div>
   <div class="footer">
   </div>
   複製代碼

   運行後會發現
   footer與body-two融爲一體了。

清除也簡單
```

.footer {
    clear: both;
}
```
複製代碼

6. flex
flex的意思是彈性佈局。
給元素設置
display: flex; 便可讓他處於彈性佈局的狀態。
處於彈性佈局中的元素會默認按照水平主軸排列。
能夠使用
flex-direction: column/row; 來控制是按照水平主軸排列仍是垂直主軸排列。
排列的方向有垂直水平兩種，排列的方式則有不少：
經常使用的通常有
按照主軸
justify-content: flex-end/flex-start/center/space-between/space-around/space-evenly 在子元素徹底鋪滿狀況下，這幾個沒有不一樣，主要是未鋪滿的狀況：
flex-end/flex-start 相反，end是元素靠右/下，start是靠左/上。
center 居中分佈。
space-betwenn 第一個放在首位，最後一個放在末尾，其他的均勻在中間。
space-around元素周圍的空間均勻分佈。
space-evenly元素間隔均勻分佈。

按照縱軸  
```
align-items: flex-start | flex-end | center | baseline | stretch
```
`baseline`按照第一行文字對齊。  
`stretch`會將元素拉伸。  
其餘一致。  
同一行裏的元素過多，flex默認不會換行，但咱們能夠設置它：  
```
flex-wrap: wrap
```
還能夠倒過來：  
```
flex-wrap: wrap-reverse
```
除了給父元素的，還有給子元素的：  
    若是想讓某元素站的空間比其餘的大一些則能夠用  
    ```
    flex-grow: 1
    ``` 
    默認狀況下都是 0，會按照設置的值來等比例放大。  
    空間不太足時想讓某個元素不變或是更小也是能夠的：  
    ```
    flex-shirnk: 0
    ```
    默認是1，0會保持不變，負值無效，值越大縮得越小。  
    還記得上面三欄佈局中用到的：  
    ```
    flex-basis: auto
    ```
    當有剩餘空間時，會分配給多餘的空間，默認值是`auto`也就是不分配，按原來的大小。  
    若是元素有本身的思想，還可讓它有不同的煙火：  
    ```
    align-self: auto
    ```
    默認是auto，繼承父元素的設置，其餘與 align-items 屬性名一致功能一致。   
[參考](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
複製代碼

7. BFC
   BFC是塊級格式化上下文，也就是一個獨立區域，
   看例子：

   <style type="text/css">
       .outer {
         border: 5px dotted rgb(214,129,137);
         border-radius: 5px;
         width: 450px;
         padding: 10px;
         margin-bottom: 40px;
       }
   
       .float {
         padding: 10px;
         border: 5px solid rgba(214,129,137,.4);
         border-radius: 5px;
         background-color: rgba(233,78,119,.4);
         color: #fff;
         float: left;  
         width: 200px;
         margin: 0 20px 0 0;
       }
   </style>
   <div class="outer">
     <div class="float">浮動元素</div>
     這裏是一些非浮動的文字，用於測試，你還能夠把它寫的更長一點。
   </div>
   複製代碼

   運行例子會看到文字環繞在元素的周圍

   

   若是去掉一些文字

   <div class="outer">
     <div class="float">浮動元素</div>
     非浮動文字
   </div>
   複製代碼

   

   會看到邊框的虛線是與非浮動文字爲基準的，由於設置爲float的元素是脫離文檔流的，不能老老實實呆在原來的位置，但咱們仍是想讓浮動元素也包含在這個outer虛線中。
   這時候BFC就能夠出馬了：BFC用來建立一個獨立的佈局區域
   給父級設置

   overflow: auto
   複製代碼

   

   便可讓父級變成一個獨立的塊級區域，固然overflow這個屬性原本是定義溢出後的行爲的，
   因此根據不一樣的狀況還能夠有其餘的屬性可讓它變成BFC：
   - float的值不爲none
   - position的值不爲static或者relative
   - display的值爲 table-cell, table-caption, inline-block, flex, inline-flex, flow-root 中的一個
   - overflow的值不爲visible
   參考資料:

   理解CSS中的BFC

   理解CSS佈局和BFC

8. position
   position 有 5個可設置的屬性
   static 沒有定位，默認值。
   absolute 絕對定位，相對於 static 定位之外的第一個父元素進行定位。
   relative 相對定位，相對於元素原本的位置進行定位。
   fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
   inherit 繼承父元素的定位。
   設置絕對定位或相對定位後能夠用left,right,top,bottom來進行上下左右移動。
   這個直接看W3C的例子吧。

9. 如何用CSS實現自適應正方形
   在三欄佈局裏就用到了一個自適應的父元素：

   .body {
       width: 100vw;
       height: 100vh;
       background: black;
   }
   <div class="body">
   </div>
   複製代碼

   在不一樣設備上不一樣瀏覽器間的可視窗口均可能不一樣，用px都是固定的大小，因此用到vw和vh是一個不錯的選擇，它們會根據可視窗口的的大小來調整每一個單位的值。
   還能夠用百分比來自適應父元素：

   .body {
       width: 100%;
       height: 100%;
       background: black;
   }
   <body>
       <div class="body">
       </div>
   </body>   
   複製代碼

   繼承父元素content區域的大小，記得盒模型吧。

10. 如何用CSS實現三角形
    CSS三角形能夠用border來作，
    直接看代碼

    <style> .body { width: 0; height: 0; border-style: solid; border-width: 100px; border-top-color: black; border-bottom-color: pink; border-left-color: yellow; border-right-color: red; } </style>
    <div class="body">
    </div>
    複製代碼

    每個邊呈現的都是三角形。

    

    還能夠用clip-path來作：

    <style> .body { width: 100px; height: 100px; background: pink; clip-path: polygon(50% 0, 0 50%, 100% 50%); } </style>
    <div class="body">
    </div>
    複製代碼

    

    polygon的座標從左上角開始，座標是(x y, x y, x y)。