前言：
2020年是多災多難的一年，疫情持續(xù)至今，到目前，全世界的經(jīng)濟都受到不同程序的影響，各大公司裁員，在這樣一片嚴峻的形式下，找工作更是難上加難。
企業(yè)的門檻提高，第一，對于學歷的要求，必須學信網(wǎng)可查的統(tǒng)招本科；第二，對于技術(shù)的掌握程序，更多的是底層原理，項目經(jīng)驗，等等。
下面是面試幾周以來，總結(jié)的一些面試中常被問到的題目，還有吸取的一些前輩們分享的貼子，全部系統(tǒng)的羅列出來，希望能夠幫到正在面試的人。
1. 語義化
語義化：用合理、正確的標簽來展示內(nèi)容，比如h1~h6定義標題。
優(yōu)點：
1.易于用戶閱讀，樣式丟失的時候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。
2.有利于SEO，搜索引擎根據(jù)標簽來確定上下文和各個關(guān)鍵字的權(quán)重。
3.方便其他設備解析，如盲人閱讀器根據(jù)語義渲染網(wǎng)頁
4.有利于開發(fā)和維護，語義化更具可讀性，代碼更好維護，與CSS3關(guān)系更和諧。HTML5語義化標簽：article nav（導航） aside section（節(jié)，段） header footer address等
2. src和href的區(qū)別
- href：Hypertext Reference的縮寫，超文本引用，它指向一些網(wǎng)絡資源，建立和當前元素或者說是本文檔的鏈接關(guān)系。
<a ></a>
<link type="text/css" rel="stylesheet" href="aaa.css">
- src：source的縮寫，表示的是對資源的引用，它指向的內(nèi)容會嵌入到當前標簽所在的位置。
<img src="aaa.jpg">
<iframe src="aaa.html">
<script src="aaa.js">
- 區(qū)別
1.src用于替代這個元素，而href用于建立這個標簽與外部資源之間的關(guān)系。
2.瀏覽器需要加載完畢src的內(nèi)容才會繼續(xù)往下走。而遇到href，頁面會并行加載后續(xù)內(nèi)容。
2. IPhoneX的適配
- 適配方案viewport-fit：
auto默認：viewprot-fit:contain;頁面內(nèi)容顯示在safe area內(nèi)
cover：viewport-fit:cover,頁面內(nèi)容充滿屏幕
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
- 媒體查詢
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }
- 小程序：可以通過wx.getSystemInfo獲取設備信息，來動態(tài)綁定樣式
3. ios鍵盤問題
- iOS12系統(tǒng)在輸入框失去焦點，軟鍵盤關(guān)閉后，被撐起的頁面無法回退到原來的位置
$("input, select").blur(function(){
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
}
- 鍵盤擋住輸入框
element.scrollIntoView() // 讓當前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。
- ios無法自動聚焦喚起鍵盤
ios中喚起鍵盤必須有用戶觸發(fā)，所以無法直接用focus，可以由用戶觸發(fā)一個其他事件來使得輸入框focus，從而喚起鍵盤。
3. 盒子模型
- 一個盒子模型可分成margin(外邊距), border(邊框), padding(內(nèi)邊距), content(內(nèi)容)， 四部分組成。
box-sizing:border-box;
box-sizing:content-box;
4. 說說你用過的CSS布局有哪些？
layout布局、flex布局、雙飛翼、圣杯布局等
雙飛翼，圣杯布局有什么區(qū)別?
1.首先兩種布局方式都是解決兩邊等寬,中間區(qū)域自適應的問題
2.相同之處:都是采用三欄全部浮動(float),左右兩邊兩欄加上負(margin)讓其跟中間欄并排，以形成三欄布局
3.不同之處:解決中間欄不被遮擋的問題,思路不同,圣杯布局采用一層結(jié)構(gòu),使用(position: relative)配合(left)和(right)屬性實現(xiàn)
4.推薦使用雙飛翼布局,雖然多一層結(jié)構(gòu),但是少幾行CSS代碼,看起來更清晰,性能更佳
5. link 和 @import的區(qū)別
<link rel="stylesheet" href="common.css" type="text/css" />
<style type="text/css">@import url(common.css) </style>
link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。
link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
link支持使用Javascript控制DOM去改變樣式；而@import不支持。
6. 移動端 一像素邊框
- 通過媒體查詢,寫具體的數(shù)值
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
- 通過偽類,配合transform,縮放
.border-1px::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
pointer-events: none;
transform-origin: center top;
-webkit-transform-origin: center top;
border-top: 1px solid #E6E6E6;
width: 100%;
height: 200%;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
7. 移動端點擊300ms延遲
- meta禁用縮放或固定視口寬度
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
fastclick插件
1.fastClick的實現(xiàn)原理:是在檢測到touchend事件的時候，會通過DOM自定義事件立即出發(fā)模擬一個click事件，并把瀏覽器在300ms之后的click事件阻止掉。
2.缺點：腳本相對較大
3.fastclick 在ios 上可能會影響元素自動觸發(fā)，比如 直接click()；會攔截第一次，需要執(zhí)行兩次click()；才會觸發(fā)；安卓上不需要；tap事件
1.在touchstart 時會記錄一個值x1，y1，在touchend時會記錄x2，y2，通過對比這幾個值，判斷用戶是否是點擊事件，而不是滑動事件，然后直接觸發(fā)事件
2.tap事件存在"點透"的情況
7. 單位問題
%：
1.margin,padding是相對父元素的寬度計算的
2.top,left,bottom,right是相對于父元素的高度計算的
3.translate是相對自身元素來算的px：像素
1.em：1em等于當前元素的font-size(瀏覽器默認16px，可繼承，em可以省略)
2.rem：1rem等于html元素的font-size
3.vw,vh：視口寬度被均分成100vw,視口高度被均分成100vh。視口寬高是頁面的可視區(qū)域，如鍵盤彈起安卓的視口寬高發(fā)生變化，但iPhone不會。（安卓4.4，iOS6以上支持）vmax, vmin：
1.vmax = max(vw,vh)（vmax安卓4.4，iOS8以上支持）
2.vmin = min(vw,vh)（vmin安卓4.4，iOS6以上支持）ex和ch：
1.ex以字符"x"的高度為基準；例如1ex表示和字符"x"一樣長。
2.ch以數(shù)字"0"的寬度為基準；例如2ch表示和2個數(shù)字"0"一樣長
8. 居中方案
水平居中
1.行內(nèi)元素：text-align: center;
2.固定寬度： + margin: 0 auto;
3.flex：justify-content: center;
4.grid：justify-items: center;
5.定位：left:50%，transformX(-50%);垂直居中
1.行內(nèi)元素:：padding-top = padding-bottom
2.行內(nèi)元素: line-height = height
3.display：父display:table; 子display:table-cell; vertical-align: middle;
4.flex：align-items: center;
5.grid：align-items: center;
6.定位：top:50%，transformY(-50%);水平垂直居中
1.已知高寬，使用負邊距法
2.未知，使用grid, flex或transfrom
9. flex布局
- 比如：上面是內(nèi)容區(qū)域，底部是購物車固定容器，高度50px
.content{
flex: 1;
}
.bottom{
height: 50px;
}
10. CSS3新特性（貝塞爾曲線）
- 過渡 transition
- 動畫 animation
- 形狀轉(zhuǎn)換 transform
- 陰影 box-shadow
- 濾鏡 Filter
- 顏色 rgba
- 柵格布局 gird
- 彈性布局 flex
...
11. BFC
塊級格式化上下文，為了便于理解，我們換一種方式來重新定義BFC。一個HTML元素要創(chuàng)建BFC，則滿足下列的任意一個或多個條件即可：
1.body元素
2.float的值不是none。
3.position的值不是static或者relative。
4.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
5.overflow的值不是visibleBFC是一個獨立的布局環(huán)境，其中的元素布局是不受外界的影響，并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。
特性:
1.內(nèi)部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊 （margin坍塌）
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區(qū)域不會與float box重疊。
5.計算BFC的高度時，浮動元素也參與計算
6.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
