前端面試（1）H5+css

HTML&CSS：

• 瀏覽器內核
  
• 盒模型、flex佈局、兩/三欄佈局、水平/垂直居中；
  
• BFC、清除浮動；
• css3 的選擇器；css 的繼承
• css3動畫、H5新特性。
  

瀏覽器內核

主流瀏覽器有五大款，分別是IE、Firefox、Google Chrome、Safari、Opera。
最常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。

• IE/Eadge 瀏覽器：Trident 內核
• chrome瀏覽器：Webkit/Blink內核
• FirefoxL瀏覽器：Gecko內核
• Safari瀏覽器：Webkit內核
• Opera瀏覽器： Presto內核

盒模型

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容，可以簡單表述爲 盒模型由 content，padding，margin，border幾部分組成。
盒模型=標準盒模型+IE 盒模型
標準盒模型：標準盒模型下盒子的大小  =** width(content)** + border + padding + margin;
IE 盒模型：  IE盒模型下盒子的大小=width（content + border + padding） + margin;
CSS如何設置標準模型和IE模型:

如果doctype協議缺失，會由瀏覽器自己界定，在IE瀏覽器中IE9以下（IE6.IE7.IE8）的版本觸發怪異模式，其他瀏覽器中會默認爲W3c標準模式。

box-sizing: content-box;  標準盒模型
box-sizing: border-box;  IE盒模型

BFC:

塊級格式化上下文

BFC佈局規則是？

1. 內部的Box會在垂直方向，一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. BFC的區域不會與float box重疊。
4. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
5. 計算BFC的高度時，浮動元素也參與計算

只要元素滿足下面任一條件即可觸發BFC特性：

• body 根元素
• 浮動元素：float 除 none 以外的值
• 絕對定位元素：position (absolute、fixed)
• display 爲 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC常見作用

阻止外邊距margin 摺疊塌陷


1、阻止外邊距摺疊margin塌陷問題：在標準文檔流中，塊級標籤之間豎直方向的margin會以大的爲準，這就是margin的塌陷現象。可以用overflow：hidden產生bfc來解決。

阻止元素被浮動元素覆蓋和高度坍塌

2. 阻止浮動元素造成的父級元素高度坍塌問題和遮擋其他元素問題 高度塌陷問題，這時就可以用BFC來清除浮動了。**

**點擊查看BFC 塊級上下文演示案例

清除浮動

利用 clear:both; 清除浮動

.content{
  clear:both;
 }

利用僞類：after 清除浮動

 /*萬能清除浮動代碼*/ 
.clearfix:after{
  content: ""; /*添加一個看不見的元素*/
  visibility: hidden;  
  display: block; 
  height: 0; 
  overflow:hidden;
  clear: both; 
 
 }
.clearfix{
	zoom:1;/*兼容 ie*/
}

利用 overflow:hidden;

.content{
  overflow:hidden;
 }

**

flex 佈局

Flexible Box 模型，通常被稱爲 flexbox，是一種彈性佈局。

css兩欄佈局、三欄佈局

兩欄佈局，已知左側寬度，右邊自適應

1> 雙inline-block 左右盒子均設置爲display：inline-block; 左盒子設置固定寬高，右盒子使用calc(100% - width左);


2>使用浮動雙float 左盒子浮動，右盒子浮動，右盒子寬度設置用calc(100% - width左)可以無縫銜接不會有被覆蓋的內容。


3>使用定位雙定位 在左右盒子外側設置一個大盒子，不必設置大盒子的寬高，直接設置position:relative;左盒子設置position:absolute;固定寬高，右盒子設置position:absolute;left:width左;width:calc(100% - width左)可實現無縫銜接。


4>使用定位單定位 左盒子設置絕對定位，設置右盒子margin-left:width(左)，右盒子不必設置寬度。


5>使用flex佈局 外側盒子display:flex;align-items:flex-start/center;左盒子設置寬高即可，右盒子flex:1 1 auto;右盒子設置爲放大縮小均爲1，佔據空間是剩下的空間。


6>.使用grid網格 外層盒子設置display:grid;grid-template-rows:100px;grid-template-columns:100px auto;設置了一行兩列的網格，且右邊網格的大小自適應。


7>BFC 外側盒子設置爲overflow:auto，內部左盒子設置float:left;對左側進行浮動，繼續設置左側盒子的大小，右盒子設置overflow:auto;對左盒子觸發BFC，右盒子觸發BFC，左盒子設置右外邊距，右盒子設置左外邊距(不設置也可)，右盒子不需要設置width;

三欄佈局，已知左右側寬度，中間自適應

1.使用定位 三個盒子外側設置大盒子，大盒子使用相對定位，下面一層三個盒子均採用絕對定位，左盒子固定寬高，右盒子固定寬高並設置right: 0px;使右盒子靠右，中間盒子設置width: calc(100% - width左-width右相加);即可。


2.使用浮動 左盒子設置左浮動，右盒子設置右浮動，中間盒子設置margin:auto;display: inline-block;width: calc(100% - width左 - width 右);無縫銜接margin:auto;在這裏不管左右盒子是否一樣大都可。

3>使用grid網格 設置外層盒子爲display:grid;grid-template-rows:100px;grid-template-columns:100px auto 100px;即可。grid網格好厲害！！！

4>使用flex 設置外層盒子爲display:flex;align-items:center中間盒子設置flex:1 1 auto左右盒子在盒子內部設置內容有大小即可。

聖盃佈局

需求：

• 1.兩邊固定，中間自適應；
• 2.先加載middle內容；
• 3.三列等高佈局；

 <div id="content">
    <div id="middle">
      <p>middle</p>
      <p>middle</p>
      <p>middle</p>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>

	<style>
  	#content{ 
      overflow: hidden;
      width:500px;  //設置總寬度
      padding: 0 150px 0 100px; //爲左右2側留出空間
    }  
    #left,#right{
 		height: 200px;
  		background-color:pink;
		}
    #middle{
  		background-color: green;
  		width: 100%;
	   }
    #middle,#left,#right{
  		float: left;
  		padding-bottom: 10000px;
  		margin-bottom: -10000px;
	   }
    
      #left{
  		margin-left: -100%;
  		position: relative;
        width:100px;   /* 偏移的距離和寬度 */
	  }
      #right{
        margin-right:-100%;
        position: relative;
        right:150px; /*偏移的距離和寬度*/
        width:150px;
      } 
    
	</style>

還有一件事就是他們在單獨部分內容擴充的時候，童鞋們可能發現了 底部會參差不齊。

給left、middle、right設置上 padding-bottom: 9999px; margin-bottom: -9999px;

點擊查看聖盃佈局演示案例

雙飛翼佈局

需求：

• 1.兩邊固定，中間自適應；
• 2.先加載middle內容；
• 3.三列等高佈局；

<div class="container">
    <div class="middle">
      <div class="inner">
        <h4>middle</h4>
      </div>
    </div>
    <div class="left">
      <h4>left</h4>
    </div>
    <div class="right">
      <h4>right</h4>
    </div>
  </div>

<style>
  	/*float流*/
    .container {
      overflow: hidden;
       width:500px;
    }

    .left,
    .middle,
    .right {
      float: left;
      min-height: 130px;
      padding-bottom: 9999px;  /*解決底部參差不齊的問題**/
      margin-bottom: -9999px;
    }
    .middle {
      width: 100%;
      height: 100%;
      background-color: blue;
    }

    .left {
      background-color: red;
      margin-left: -100%;/*右側設置寬度和距離*/
      width: 100px;
     
    }
    .right {
      background-color: green;
      margin-left: -220px; /*右側設置寬度和距離*/
      width: 220px;
    
    }
    .inner {
      margin: 0 220px 0 200px; /*用middle 內部的元素通過 margin 留出空間**/
      min-height: 130px;
      background: blue;
    }
</style>

<div class="container">
    <div class="main">
       middle
    </div>
    <div class="sub">
      <h4>left</h4>
    </div>
    <div class="extra">
      <h4>right</h4>
    </div>
  </div>

<style>
/*雙飛翼 flex佈局*/
  .container {
    height: 200px;
  }
  .sub {
    background: red;
  }
  .main {
    background: blue;
  }
  .extra {
    background: yellow; 
  }
  .container {
    display: flex;
  }
  .main {
    flex-grow: 1; /*自動佔滿剩餘空間*/
  }
  .sub {
    flex: 0 0 150px; /*指定寬度，方壓縮*/
    order: -1; /*越小越靠前*/
  }
  .extra {
    flex: 0 0 200px;/*指定寬度，方壓縮*/
    order: 1; /*越大越靠後*/
  }

	/*
	flex=>flex-grow:是否佔滿剩餘空間,flex-shrink：是否壓縮,flex-basis: 基準寬度
	*/
</style>

雙飛翼佈局float流演示案例
雙飛翼佈局flex流演示案例
**

總結：

• 相同點：

聖盃佈局和雙飛翼佈局解決的問題是一樣的，就是兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。
聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以形成三欄佈局。

• 不同點：

1. 雙飛翼佈局給主面板添加了一個父標籤用來通過margin給子面板騰出空間。
2. 聖盃採用的是padding，而雙飛翼採用的margin，解決了聖盃佈局的問題。
3. 雙飛翼佈局不用設置相對佈局，以及對應的left和right值。

水平/垂直居中

1.絕對定位+margin:auto

.box{
	position:relative;
}

div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

2.絕對定位+負margin

.box{
	position:relative;
}

div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

3.絕對定位+transform

.box{
	position:relative;
} 
div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父級的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

4.flex佈局

.box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句話就可以實現不定寬高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }

**

5.table-cell實現居中

	<div class="outter">
      <div class="inner">
        <div class="foo">999 </div>  
      <div>
  </div>


.outter { /**定義最外層盒子的 table(非必須)，使用百分比時使用*/
  display: table;
} 

.inner {
  display: table-cell; /*控制子元素垂直居中*/
  text-align: center;
  vertical-align: middle;
  width:100px;
  height:100px;
  background:red;
}

.foo{
    display:inline-block; /*必須爲行內元素*/
    width:50px;
    height:50px;
    background:green;
}

css 的選擇器

• 標籤選擇器，類選擇器，id 選擇器，後代選擇器，
• 屬性選擇器：屬性選擇器的標誌性符號是 []，匹配含義：^：開頭 $：結尾 *：包含。E[title="abc"]選中頁面的E元素，並且E需要帶有title屬性，且屬性值完全等於abc。
• 結構僞類選擇器：

選擇符號	含義	相同點
E:first-child	匹配父元素的第一個子元素E	帶有child，以 E 元素的父元素爲參考
E:last-child	匹配父元素的最後一個子元素 E
E:nth-child(n)	匹配父元素的第n個子元素E
E:nth-child(odd)	匹配奇數
E:nth-child(even)	匹配偶數
E:nth-last-child(n)	匹配父元素的倒數第n個子元素E
E:first-of-type	匹配同類型中的第一個同級兄弟元素E。	帶有type，我們可以這樣理解：先在同級裏找到所有的E類型，然後根據 n 進行匹配。
E:last-of-type	匹配同類型中的最後一個同級兄弟元素E。
E:nth-of-type(n)	匹配同類型中的第n個同級兄弟元素E。
E:nth-last-of-type(n)	匹配同類型中的倒數第n個同級兄弟元素E。

• 僞元素選擇器：
  • E::before 設置在 元素E 前面（依據對象樹的邏輯結構）的內容，配合content屬性一起使用。
    
  • E::after 設置在 元素E 後面（依據對象樹的邏輯結構）的內容，配合content屬性一起使用。

點擊查看詳細：https://www.cnblogs.com/qianguyihao/p/8426799.html

position的值

值	描述
absolute	生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative	生成相對定位的元素，相對於其正常位置進行定位。
sticky	粘性吸頂佈局

css的繼承性的屬性：

類型	繼承屬性
字體系列屬性	font：組合字體； font-family：字體系列 font-family：字體系列 font-weight：設置字體的粗細 font-size：設置字體的尺寸 font-style：定義字體的風格
文本系列屬性	text-indent：文本縮進 text-align：文本水平對齊 text-shadow：設置文本陰影 line-height：行高 word-spacing：字間隔 letter-spacing：字符間距 direction：規定文本的書寫方向 color：文本顏色
元素可見性	visibility
列表屬性	list-style-type
光標屬性	cursor

css動畫

可以參考https://juejin.im/post/6844903845470945294





animation: move 2s linear 3 alternate both;

animation-name（ keyframe 動畫名稱_）_	animation-duration（動畫持續時間）	animation-timing-function 指定動畫計時函數，即動畫的速度曲線	animation-delay （運動延遲）單位 s	animation-iteration-count (動畫播放的次數,默認 1)	animation-direction（動畫播放的方向。）	animation-fill-mode指定動畫填充模式。	animation-play-state****（指定動畫播放狀態，正在運行或暫停。)
		ease（默認值）	0（默認延遲 0s）	1（動畫播放默認的次數爲 1）	normal  （默認值）	none（默認值，回到動畫沒開始時的狀態。）	running通過running將暫停的動畫重新播放（默認值）

| | | linear 勻速動畫 | | ```
number (設置播放的次數）

 | reverse | forwards：動畫完成後，元素狀態保持爲最後一幀的狀態。 | paused 通過paused將正在播放的動畫停下了 |
|  |  | ease-in |  | `infinite  (無限播放)` | alternate | backwards：表示，有動畫延遲時，動畫開始前，元素狀態保持爲第一幀的狀態。 |  |
|  |  | ease-out |  |  | alternate | both: 表示上述二者效果都有 |  |
|  |  | ease-in-out |  |  | alternate-reverse |  |  |
|  |  | `cubic-bezier(n,n,n,n)` 的特例。它們被稱爲貝塞爾曲線  ([https://cubic-bezier.com/](https://cubic-bezier.com/#.17,.67,.83,.67)) |  |  |  |  |  |


<br />

<a name="Eev5M"></a>
### css 動畫和 js 動畫的區別：
<a name="f26aa197"></a>
#### CSS3動畫的優點和缺點
優點：

1. CSS3動畫在性能上會稍微好一些，瀏覽器會對CSS3的動畫做一些優化(比如專門新建一個圖層用來跑動畫)
1. 代碼相對簡單

缺點：

1. 在動畫控制上不夠靈活
1. 兼容性不好
1. 部分動畫功能無法實現(如滾動動畫，視差滾動等)
<a name="7de9e5c8"></a>
#### JS動畫的優缺點
優點：<br />JavaScript動畫正好彌補了這兩個缺點。

1. 控制能力強，可以單幀的控制和變換
1. 寫的好，寫的好的話，完全可以兼容IE6

缺點：<br />1.JS運算預渲染性能不如CSS3動畫，因爲CSS動畫的transform矩陣，是C++級的，必然要比JavaScript級的計算要快

2. 還有就是對庫比較依賴
2. 編碼較爲繁瑣
<a name="2eb3c709"></a>
#### 綜上所述

- 對於一些需要複雜控制的動畫，使用JavaScript比較靠譜
- 如果是一些小的，簡單的動畫，就使用CSS3動畫


<br />
<br />
<br />

<a name="pUNtZ"></a>
### H5新特性


<a name="6073d869"></a>
#### 新特性
1.語意特性,添加`<header><header/><nav><nav>`等標籤<br />2.多媒體， 用於媒介回放的 video 和 audio 元素<br />3.圖像效果，用於繪畫的 canvas 元素，svg元素等<br />4.離線 & 存儲,對本地離線存儲的更好的支持,local Store,Cookies等<br />5.設備兼容特性 ，HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，<br />6.連接特性，更有效的連接工作效率，使得基於頁面的實時聊天，更快速的網頁遊戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能<br />7.性能與集成特性，HTML5會通過XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作<br />

<a name="a1d3bf88"></a>
#### 新增標籤
1.多媒體：`<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>`<br />2.新表單元素：`<datalist> ,<output> , <keygen>`<br />3.新文檔節段和綱要:`<header>頁面頭部、<section>章節、<aside>邊欄、<article>文檔內容、<footer>頁面底部、<section>章節、<aside>邊欄、<article>文檔內容、<footer>頁面底部`等<br />

<a name="rfvSZ"></a>
#### Input 有哪些新增類型？

- color,選擇顏色
- date 選擇日期
- email 用於檢測輸入的是否爲email格式的地址
- month 選擇月份
- number  用於應該包含數值的輸入域，可以設定對輸入值的限定
- range 用於定義一個滑動條，表示範圍
- search 用於搜索，比如站點搜索或 Google 搜索
- tel 輸入電話號碼<br />-time 選擇時間
- url 輸入網址
- week 選擇周和年



<a name="lP4no"></a>
#### 瀏覽器本地存儲中 cookie ，localStorage 有什麼區別？ 
<a name="NS35j"></a>
#### session(sessionId)，token（令牌），cookie，sessionStorage，localStorage

- 共同點：sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據，session 存儲在服務端。
- sessionStorage：頁面關閉，緩存消失，最大 5M.
- localStorage：除非手動刪除，否則永遠存在本地，最大 5M.
- cookie：存儲在客戶端，最大4kb。
   - **Cookie主要是由服務器生成**，且前端也可以設置，保存在客戶端本地的一個文件，通過response響應頭的set-Cookie字段進行設置，且Cookie的內容自動在請求的時候被傳遞給服務器。如下：

![image.png](https://cdn.nlark.com/yuque/0/2020/png/241787/1596695630377-bc927c6f-e053-425f-a451-a8176853b439.png#align=left&display=inline&height=259&margin=%5Bobject%20Object%5D&name=image.png&originHeight=518&originWidth=1474&size=101224&status=done&style=none&width=737)

- session:
   - session存儲於服務器，可以理解爲一個狀態列表，擁有一個唯一識別符號sessionId，通常存放於cookie中。每次認證用戶發起請求時，服務器需要去創建一個記錄來存儲信息。當越來越多的用戶發請求時，內存的開銷也會不斷增加。服務器收到cookie後解析出sessionId，再去session列表中查找，才能找到相應session。依賴cookie
   - cookie只是實現session的其中一種方案。雖然是最常用的，但並不是唯一的方法。禁用cookie後還有其他方法存儲，比如放在url中
   - 現在大多都是Session + Cookie，但是隻用session不用cookie，或是隻用cookie，不用session在理論上都可以保持會話狀態。可是實際中因爲多種原因，一般不會單獨使用
   - 如果只用cookie不用session，那麼賬戶信息全部保存在客戶端，一旦被劫持，全部信息都會泄露。並且客戶端數據量變大，網絡傳輸的數據量也會變大
- token
   - token 也稱作令牌，由uid+time+sign[+固定參數]
   - token 的認證方式類似於**臨時的證書籤名**, 並且是一種服務端無狀態的認證方式, 非常適合於 REST API  的場景. 所謂無狀態就是服務端並不會保存身份認證相關的數據。
   - token在客戶端一般存放於localStorage，cookie，或sessionStorage中。在服務器一般存於數據庫中
   - 一般 token 放入header 中



<a name="y1M9b"></a>
#### 分佈式情況下的session和token
session是有狀態的，一般存於服務器內存或硬盤中，當服務器採用分佈式或集羣時，session就會面對負載均衡問題。

- 負載均衡多服務器的情況，不好確認當前用戶是否登錄，因爲多服務器不共享session。這個問題也可以將session存在一個服務器中來解決，但是就不能完全達到負載均衡的效果。當今的幾種[解決session負載均衡](http://blog.51cto.com/zhibeiwang/1965018)的方法。

而token是無狀態的，token字符串裏就保存了所有的用戶信息

- 客戶端登陸傳遞信息給服務端，服務端收到後把用戶信息加密（token）傳給客戶端，客戶端將token存放於localStroage等容器中。客戶端每次訪問都傳遞token，服務端解密token，就知道這個用戶是誰了。通過cpu加解密，服務端就不需要存儲session佔用存儲空間，就很好的解決負載均衡多服務器的問題了。這個方法叫做[JWT(Json Web Token)](https://huanqiang.wang/2017/12/28/JWT%20%E4%BB%8B%E7%BB%8D/)



> 總結：
> - session存儲於服務器，可以理解爲一個狀態列表，擁有一個唯一識別符號sessionId，通常存放於cookie中。服務器收到cookie後解析出sessionId，再去session列表中查找，才能找到相應session。依賴cookie
> - cookie類似一個令牌，裝有sessionId，存儲在客戶端，瀏覽器通常會自動添加。
> - token也類似一個令牌，無狀態，用戶信息都被加密到token中，一般 token 放到請求頭 header 中，服務器收到token後解密就可知道是哪個用戶。需要開發者手動添加。
> - jwt只是一個跨域認證的方案


<br />
<br />

<a name="ahuf1"></a>
### 參考文章：
[https://www.jianshu.com/p/c435f52fb95f](https://www.jianshu.com/p/c435f52fb95f)<br />[https://juejin.im/post/6844903817104850952](https://juejin.im/post/6844903817104850952)<br />[https://juejin.im/post/6844904000756809736](https://juejin.im/post/6844904000756809736)<br />[https://www.jianshu.com/p/34044e3c9317](https://www.jianshu.com/p/34044e3c9317)