前端面試基礎(1年之內需掌握)

金三銀四 公司讓我面試 1年經驗的前端，特此花時間研究了一番面試題，近日整理了一下想分享出來，讓更多小掘友看到，在我看來 這些基本都是必備的知識點

css經常使用佈局

基本值	flexbox	grid	table	float佈局
none	flex	grid	table	float-fixed
inline	inline-flex	inline-grid	table-row	float-fluid
block			table-cell	960網格佈局
inline-block

使用inline-block 的問題以及解決方案

• 水平間隙問題 這是由於編寫代碼時輸入空格、換行都會產生空白符。而瀏覽器是不會忽略空白符的，而且對於多個連續的空白符自動合併成一個，故產生了所謂的間隙。

通常來講咱們有兩種方法來去掉這個換行引發間隙： 代碼不換行 和 設置 font-size。

(推薦)經過設置父元素的 font-size 爲 0 來去掉這個間隙，而後重置子元素的 font-size，讓其恢復子元素文字字符。 只要設置 inline-block 就要去間隙

float清除浮動詳解

主要是爲了解決因爲浮動元素脫離文流致使的元素重疊或者父元素高度坍塌的問題

• 清除前面兄弟元素浮動

清除前面兄弟元素浮動很簡單，只須要在不想受到浮動元素影響的元素上使用 clear:both 便可

• 閉合子元素浮動

1. 給元素設置 clearfix 經常使用

經過父元素的僞元素（::after）實現的著名 clearfix 方法，代碼以下：
<div class="container clearfix">
    <div class="box"></div>
</div>
.clearfix::after {
    content:"";
    display:table;
    clear: both;
}
給父元素增長一個專門用於處理閉合子元素浮動的 clearfix 類名，該類使用 ::after 僞元素類選擇器增長一個內容爲空的結構來清除浮動.
複製代碼

2. 給父元素新建一個 BFC(塊格式化上下文)

請詳情講一下定位方式

實現一個彈窗 全屏居中的效果。

1. div使用絕對佈局，設置 margin:auto; 並設置 top、left、right、bottom 的值相等便可，不必定要都是0。

.center{
    text-align: center; /*讓div內部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
複製代碼

2. 絕對佈局，讓left和top都是50%，這在水平方向上讓div的最左與屏幕的最左相距50%，垂直方向上同樣，因此再用transform向左（上）平移它本身寬度（高度）的50%，也就達到居中效果了，效果圖和上方相同。

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
複製代碼

說下幾種經常使用選擇器

五大類選擇器：

1. 基本選擇器

• 元素選擇（直接獲取元素名 P、h1）【過於直接】
• ID選擇（#id）【取值惟一不能複用】
• 類選擇（.class）【組合、複用】
• * 通用選擇器(全部元素)

2. 關係選擇器

   

3. 僞類選擇器

• :nth-child(n) ： n能夠是數字(4)、關鍵詞(old,even)或公式(2n+1)
• :active: 將樣式添加到被激活的元素
• :focus: 將樣式添加到被選中的元素
• :hover: 鼠標懸浮在元素上時 添加樣式
• :link: 添加到未被訪問過的連接
• :visited 添加到被訪問過的連接
• :first-child: 添加到元素的第一個子元素
• :lang： 定義使用的語言

4. 僞元素選擇器 :first-letter : 添加到文本的首字母 :first-line : 添加到文本的首行 :before : 某元素以前插入某些內容 :after : 某元素以後插入某些內容

5. 屬性選擇器

   

說一下 CSS3新特性

1. HTML5 語義元素
2. HTML5 Web 存儲

• sessionStorage: 客戶端數據存儲，只能維持在當前會話範圍內。
• localStorage: 客戶端數據存儲，能維持在多個會話範圍內。對象存儲的數據沒有時間限制。對於大量複雜數據結構，通常使用IndexDB

3. CSS3 多媒體查詢 @media all and(min-width:800px){...}
4. CSS3 轉換和變形：transform
5. CSS3 過渡：transition
6. CSS3 動畫：animation

異步請求實現方式

1. 最原始的js ,new XMLHttpRequest(); //因爲瀏覽器兼容的緣由，代碼複雜，多使用基於jQuery的異步請求方法（內部封裝）
2. 基於jQuery的Ajax方法：
3. Vue--axios （promise）

講一下 本身 代碼 調試方法

JS數組操做

• concat() 連接兩個或更多的數組,並返回結果
• join() 把數組經過指定分隔符進行分割並拼接成一個字符串
• pop() 刪除並返回數組的最後一個元素
• push() 向數組的末尾添加一個或更多元素,並返回新長度
• reverse() 反轉數組中元素的順序

Jq DOM選擇器、DOM文檔操做

• append() : 向元素結尾插入由參數指定的內容。
• prepend():向元素開頭插入由參數指定的內容。
• after() : 在匹配的元素以後插入內容。
• before(): 在每一個匹配的元素以前插入內容。
• addClass():向匹配的元素添加指定的類名。
• attr() :設置或返回匹配元素的屬性和值。
• removeAttr():移除指定的屬性。

Vue框架的優點

1. MVVM: Model 層表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯； View 表明UI 組件，它負責將數據模型轉化成UI 展示出來， ViewModel 是一個同步View 和 Model的對象。

2. mvc和mvvm其實區別並不大。都是一種設計思想。 主要就是mvc中Controller演變成mvvm中的viewModel。 mvvm主要解決了mvc中大量的DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。

區別 vue數據驅動，經過數據來顯示視圖層而不是節點操做。場景：數據操做比較多的場景，更加便捷

vue生命週期（詳解）

• beforeCreate：初始化了部分參數，若是有相同的參數，作了參數合併，執行beforeCreate；el和數據對象都爲undefined，還未初始化；

• created：初始化了 Inject、Provide 、props、methods、data、computed和watch，執行created ；data有了，el尚未；

• beforeMount：檢查是否存在el屬性，存在的話進行渲染dom操做，執行beforeMount；$el和data都初始化了，可是dom仍是虛擬節點，dom中對應的數據尚未替換；

• mounted：實例化 Watcher,渲染dom，執行mounted；vue實例掛載完成，dom中對應的數據成功渲染；

• beforeUpdate：在渲染dom 後，執行了mounted 鉤子後，在數據更新的時候，執行 beforeUpdate；

• updated：檢查當前的watcher列表中，是否存在當前要更新數據的watcher，若是存在就執行updated；

• beforeDestroy：檢查是否已經被卸載,若是已經被卸載,就直接return出去,不然執行beforeDestroy；

• destroyed：把全部有關本身痕跡的地方，都給刪除掉；

git經常使用命令

git clone:  下載初始化
Git add:添加
Git commit -m ‘ ’ :提交 帶消息
Git push：推送
Git pull： 拉取
複製代碼

前端1W左右的面試

轉載請標註 出處謝謝~ 感受有幫助的不妨圈起來，後期不按期發佈前端知識