那些年，面試官問到的面試題總結

1、HTML 語意化的理解

html語意化的含義：根據內容的結構化，選擇合適的標簽便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地決議，
語意化的原因：在我的理解當中是：

1. 為了在沒有CSS情況下，頁面也能呈現出很好的內容結構、代碼結構，
2. 用戶體驗：例如title、alt用于解釋名詞或者解釋圖片資訊、label標簽dd的活用，
3. 有利于SEO（網路引擎搜索優化）：和搜索引擎建立良好的溝通，有助于爬蟲抓取更多的有效資訊
4. 方便其它設備決議
5. 便于團隊開發和維護

HTML5新增了哪些語意化標簽

頭部：<header></header>
 尾部：<footer></footer> 
獨立結構：<article></article> 
主要內容：<main></main> 
導航：<nav></nav> 
側邊欄：<aside></aside>    
節、段、分組：<section></section>  

表單新增語意化標簽：

3、H5的新特性

1. 語意化標簽

2. 本地儲存
   （1）localStorage.setItem(“name”,arr);//保存資料
   （2）localStorage.getItem(“name”)//讀取資料，也可以根據key值讀取
   （3）localStorage.removeItem(key)//洗掉單個資料
   （4）localStorage.clear()//資料清空復制代碼

3. 播放音頻檔案的標簽，
   （1）<audio></audio>音頻
   （2）<video></video>視頻復制代碼

4. Canvas
   （1） 使用Javascript來繪制影像，canvas 元素本身是沒有繪圖能力的，所有的繪制作業必須在 JavaScript 內部完成

<canvas id="myCanvas" width="200" height="100" style="1px solid #000000"></canvas>復制代碼

5. SVG繪圖：一種使用XML描述2D影像的語言，

4、input和textarea的區別

<input>是單行文本框，不會換行，通過size屬性指定顯示字符長度，注意：當使用css限定了寬高，那么size屬性就不再起作用了，有自己的value值，Maxlength屬性指定文本框可以輸入的最長長度，可以通過width和height設定寬高，但是也不會增加行數，

<input type="text" value="你好" Maxlength="10">復制代碼

<textarea>是多行文本輸入框，文本區中可容納無限數量的文本，無value屬性，其中的文本默認字體是等寬字體(通常是Courier)，可通過cols和rows屬性來規定textarea的尺寸，不過更好的辦法是使用CSS的height和width屬性，

<textarea cols="20" rows="30"></textarea>

5、用一個div模擬textarea的實作

<div id="textarea" contenteditable="true">復制代碼
#textarea{
    width:300px;
    border:1px solid #ccc;
    min-height:150px;
    max-height:300px;
    overflow:auto;
    font-size:14px;
    outline:none;
}復制代碼之間使用

contenteditable屬性，值為Boolean值，true系結元素可編輯，false(默認)元素不可編輯，

6、移動設備忽略將頁面中的數字識別為電話號碼的方法

標準的電話號碼格式是這樣子的：1-408-555-555，但是有時候不是電話號碼的數字也會被瀏覽器自動決議為電話號碼，并把數字的顏色和樣式都改了，如果忽略頁面中的數字識別為電話號碼，只要把這個默認行為關閉即可，只要一行代碼

<meta name="format-detection" content="telephone=no">復制代碼

這個關閉不會影響真正電話號碼的識別，
補充：format-detection屬性和含義:
format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html里的一些格式的，那關于meta的format-detection屬性主要是有以下幾個設定：

<meta name="format-detection" content="telephone=no">//禁止了把數字轉化為撥號鏈接
<meta name="format-detection" content="email=no">//告訴設備不識別郵箱，點擊之后不自動發送
<meta name="format-detection" content="adress=no">//禁止跳轉至地圖！
<meta name="format-detection" content="telephone=no,email=no,adress=no">//以上三者組合

7、css怎么指定盒子模型為標準盒模型與怪異盒模型？區別是什么？

一、盒子模型的組成：

1. Margin（外邊距）
2. Border（邊框）
3. Padding（內邊距）
4. Content（內容）

二、標準盒子模型：

1. css中width，height屬性，分別表示的是盒子模型中內容的寬度和高度
2. Css中padding，表示的是盒子模型的padding部分
3. Css中border，表示的是盒子模型中的border部分
4. Css中margin，表示的是盒子模型中margin（外邊距）

三、怪異盒子模型：

1. css中width，height屬性，分別表示的是盒子模型中內容的寬度和高度加上盒子模型中padding（內邊距）和berder的寬度
2. Css中padding，表示的是盒子模型的padding部分
3. Css中border，表示的是盒子模型中的border部分
4. Css中margin，表示的是盒子模型中margin（外邊距）

四、標準盒模型和怪異盒模型的計算

1. 標準盒模型： css中width/height=content的width/height
2. 怪異盒模型：css中width/height=content的width/height+padding+border

五、css3中box-sizing下的盒子模型

1. box-sizing：content-box 標準盒模型
2. Box-sizing：border-box 怪異盒模型

8、彈性盒模型 （ 單詞背記）

• [flex-direction:row //(默認)主軸為水平方向,起點在左端， ]
• [ flex-wrap:nowrap //(默認)不換行]
• [flex-wrap:wrap //換行,第一行在上方 ]
• [ justify-content:flex-start //(默認)左對齊]
• [ justify-content:flex-end //右對齊]
• [justify-content:center //居中(子元素緊湊居中) ]
• [justify-content:space-between; //兩端對齊,專案之間的間隔都相等 ]
• [ justify-content:space-around; //每個專案兩側的間隔相等復制代碼]
• [ align-items:flex-start //與交叉軸的起點對其]
• [ align-items:flex-end //與交叉軸的終點即末尾對其]
• [align-items:center //與交叉軸的中點對其 ]
• [align-content:center //與交叉軸的中點對齊 ]

標簽：

單標簽 img br hr input a
雙標簽 html body div ul li ol li
塊元素 div p h1-h6 獨占一行 可以設定寬高
行元素 img input button canvas select option textarea 不獨占一行 可以設定寬高
行內元素 span i s u 等等 不獨占一行 不可以設定寬高

9、css基本語法

Css定義方法是：
選擇器：{屬性：值，屬性：值，屬性：值}
結構 和 樣式

10、css單位

1. px：絕對單位，頁面按精確像素展示，
2. em：相對單位，相對于父元素來決定大小的 如果父元素的字體大小為20px 那么1em就等于20px 2em就等于40px
3. rem：相對單位，相對于根節點html的font-size的大小來計算，如果根元素html 的字體大小為10px 那么1rem就是10px 10rem就為100px
4. vw：視窗寬度，1vw等于視窗寬度的1%，
5. vh：視窗高度：1vh等于視窗高度的1%，
6. vmin：以寬和高之間最短的一端為基準，如果寬>高，那么1vmin相當于寬的1%；
7. vmax：以寬和高之間最長的一端為基準，如果寬>高，那么1vmax相當于寬的1%；
8. %：百分比，
   rem原理
   
   Document.documentElement是元素的意思 clientwidth是可視寬度

11、css選擇器

選擇器優先級：!important > 行內式 > id選擇器 > class選擇器 > 屬性選擇器 > 偽類選擇器（: hover） > 標簽選擇器 > 偽元素（: before） > 通配符選擇器

常用的選擇器：1、標簽選擇器 2、id選擇器 3、類選擇器 4、層級選擇器 5、組選擇器 6、偽類選擇器

可繼承的屬性：

• font-size、font-family、color

不可繼承的屬性：

• border、padding、margin、width、height

權重值：

1. !important權重值：10000，
2. 行內樣式：1000，
3. id選擇器：100
4. class、偽類、屬性、偽元素選擇器：10

5.  標簽選擇器：1
   

6. 后代選擇器的權重為包含的選擇符權重值之和，

CSS3新增的偽類：

1. first-of-type：選擇屬于其父元素的首個元素；
2. last-of-type：選擇屬于其父元素的最后元素；
3. only-of-type：選擇屬于其父元素的唯一元素；
4. only-child：選擇屬于其父元素的唯一子元素；
5. nth-child（1）：選擇屬于其父元素的第一個子元素；

12、css頁面引入方法

1. 行內式參考
   
2. 內嵌式參考
   
3. 外鏈式參考

在實體：在外部寫一個css樣式 然后用link標簽引入
<link href="zzarea.css" rel="stylesheet" type="text/css" />

4、 匯入式參考

14、什么是BFC？

1. 首先要了解 block（快級）、Format （格式化 ）Context（背景關系）的概念，
2. BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，是檔案當中的普通流
3. BFC的布局規范
   （1）…內部的Box會在垂直方向，一個接一個的放置
   （2）…Box垂直方向的距離有margin決定，
   （3）…計算BFC的高度時，浮動元素也會參與計算
4. BFC的特性

  	① 內部的塊級元素會在垂直方向上一個接一個的放置；
    ② 位于同一BFC下的相鄰塊級子元素在垂直方向上會發生margin重疊；
    ③ 位于不同BFC下的相鄰元素之間不會發生margin重疊；
    ④ BFC可以包含浮動元素；
    ⑤ BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素；

5. 如何創建BFC

、float的值不是none
、postion的值是absolute（相對定位）或者fixed（固定定位）
、display的值是 inline-block、flex、inline-flex 、table-cell
、Overflow的值不是visible

6. BFC的作用

、利用BFC避免margin重疊
、自適應兩欄布局
根據：
1、每個盒子的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)，即使存在浮	   動也是如此，
2、BFC的區域不會與float box重疊
、清除浮動
案例：當我們不給父節點設定高度，子節點設定浮動的時候，會發生高度塌陷

15、媒體查詢

1. 第一種方法：適合用與頁面多的時候 (max-widrh:) 最大（min-width最小
   

2. 第二種方法 link 引入方式
   

16、圣杯布局和雙飛翼布局 都是左右固定中間自適應 了解一下就可

18、css3 transform屬性 是來定義影片的風格

1. Transform：translate（100px） 向垂直方向平移100px
2. Transform：scale（1.5） 大于1是放大 小于1是縮放
3. Transform：skew（60deg） 傾斜60度
4. Transform：rotate（60deg） 旋轉60度
5. Transform：skewY（45deg） 縱軸45度
6. Transform-origin：left bottom 這個屬性和skewY配合使用 就變成左下角縱軸45度

19、定義影片的過渡 transition屬性

1. Transtion-property ：border-radius 指定css屬性的name，transition效果
2. Transition-duration：3s 指定transition的效果多少秒執行完
3. Transition-timing-function：linear 規定linear以相同的速度開始過渡效果
4. Transition-delay：.2s 規定延遲多少秒執行

20、自定義影片 Animation 屬性

1. Animation：myove 5s infinite
2. Animation-direction ： normal 定義影片在回圈是是否反向運動 normal 為正向運動 alternate為交替運動
3. Animation-interation-count ：1 影片的回圈次數，默認為1，也可以設定為infinite 則表達的是無限回圈

21、什么是Wed？

塊格式化背景關系（Block Formatting Context，BFC） 是 Web 頁面的可視化 CSS 渲染的一部分，是塊盒子的布局程序發生的區域，也是浮動元素與其他元素互動的區域，

22、定位 position 屬性

1. position：relative 相對定位
   特點1：不影響元素本身特性
   特點2：不會使元素脫離檔案流
   特點3：相對于自身原本的位置進行偏移
   特點4：提升層級（如果有兩個定位元素，后面的會覆寫前面的定位）
2. position：absolute 絕對定位
   特點1：是元素完全脫離標準檔案流
   特點2：若父元素沒有定位的話就一級一級往上找，直到document—頁面檔案物件
   特點3：提升層級（同相對定位）
   特點4：改變區塊元素的特性
3. position：fixed 固定定位
   特點：fixed生成的固定定位的元素，相對于瀏覽器視窗進行定位
4. position：sticky 粘性定位 （不常用）

特點1：粘性定位，改定位基于用戶滾動的位置
特點2：它的行為就像 position：relative 當頁面滾動超出目標區域時，它的表現就像position：fixed 一樣會固定在目標位置

23、浮動 清除浮動

1. 給父元素加高
2. 給父元素設定 overflow：hidden 如果如果兼容IE，在添加一個zoom：1

通過觸發B F C 方式， 實作清楚浮動
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }
    

3. 額外標簽法（給需要清楚浮動的元素設定 clear：both）
4. 使用after偽元素清除浮動 （推薦使用）

<div class=”fahter  clearfix”>
       <div>浮動</div>
<div>浮動</div>
<div>浮動</div>
</div>
樣式
<style>
  .clearfix：after{
       Content:””
  Display:block
  Height:0
  Clear:both;
  Visibility:hidden;
}
</style>

24、外邊距塌陷

外邊距塌陷：也稱為外邊距合并，是指兩個兄弟或者父子關系的塊級元的外邊距，組合在一起變成單個外邊距，不過只有上下外邊距才會塌陷，左右外邊距不會出現這種問題，
外邊距折疊的基本情況：
相鄰的元素之間的外邊距會折疊

解決外邊距塌陷的辦法：
辦法1：父元素添加邊框（border）
辦法2：父元素添加內邊距（padding）
辦法3：給父元素添加 （overflow：hidden）

代碼演示：

25、層疊背景關系 理解一下就行 知道概念是什么

層疊背景關系 ：是HTML重一個三維的概念
通過元素 設定position屬性為非static值并設定z-index屬性為具體數值，產生層疊背景關系

26、常見頁面的布局 檔案自己總結

（1）靜態布局：最傳統、原始的Web布局設計，網頁最外層容器(outer)有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條(overflow:scroll)來實作滾動查閱，
優點：采用的是css2之前的寫法,不存在瀏覽器兼容性，布局簡單，
缺點：但是移動端不可以使用pc端的頁面,兩個頁面的布局不一致,移動端需要自己另外設計一個布局并使用不同域名呈現，
（2）流式布局：流式布局也叫百分比布局，隨著螢屏的改變，頁面的布局沒有發生大的變化，可以進行適配調整，這個正好與自適應布局相補，
優點：元素的寬高用百分比做單位，元素寬高按螢屏解析度調整，布局不發生變化，
缺點：螢屏尺度跨度過大的情況下，頁面不能正常顯示，
（3）彈性布局：彈性布局是CSS3引入的強大的布局方式，彈性盒模型：display：flex；
優點：簡單、方便、快速
缺點：CSS3新特性,瀏覽器兼容性非常頭疼，而且手機瀏覽器對flex的支持也不是很理想，
（4）回應式布局：采用自適應布局和流式布局的綜合方式，為不同螢屏解析度范圍創建流式布局，利用媒體查詢可以檢測到螢屏的尺寸(主要檢測寬度)，并設定不同的CSS樣式，就可以實作回應式的布局，

27、css前處理器、后處理

Css前處理器：用一種編程語言，為css增加了一些編程的特性，最終編譯出css檔案， 比如sass、less、stylus、
優點：語言級邏輯處理，動態特性，改善專案結構
缺點：采用特殊語法，框架耦合度高，復雜度高

Css預處理的實作原理：
1、取到DSL源代碼的分析樹
2、將css的靜態分析樹 轉換為css代碼
3、將含有 動態生成 相關節點的 分析樹 轉換為 靜態分析樹

Css后處理器：推css進行處理，并最終生成css的前處理器，屬于廣義上的css前處理器，最典型的就是css壓縮工具流行的Autoprefixer，以Clean I Use上的瀏覽器支持資料為基礎，自動處理兼容性問題
優點：使用 CSS 語法，容易進行模塊化，貼近 CSS 的未來標準
缺點：邏輯處理能力有限
Css后處理器的實作原理：
1、將源代碼 做為css決議，獲得分析樹
2、對css的分析樹進行后處理
3、將css的分析樹轉換為css代碼

28、disolay都有哪些值

display：none 此元素不被顯示，
display：block 此元素顯示為塊級元素，支持寬高，獨占一行，
display：inline 此元素為行內元素，不支持寬高，不獨占一行，
display：table 此元素作為塊級表格來顯示，
display：flex 此元素為彈性盒模型
display：list-item此元素會作為串列顯示