刷前端面經筆記（三）
1.var的變數提升的底層原理是什麼？
JS 引擎的工作方式是
1)先解析程式碼，獲取所有被宣告的變數；
2)然後再執行。
也就是分為預處理和執行這兩個階段。
變數提升：所有用 var 宣告變數的語句都會被提升到程式碼頭部。另外 function 也可看作變數宣告，也存在變數提升的情況。
2.垂直水平居中的方式？
1)定位
父元素設定為： position: relative ;
子元素設定為： position: absolute ;
距上 50% ，據左 50% ，然後減去元素自身寬度的距離就可以實現
width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px;
2)flex佈局
display: flex; //flex佈局 justify-content: center; //使子專案水平居中 align-items: center; //使子專案垂直居中
3)tabel-cell
display: table-cell; vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中
3.如何判斷一個物件是否為陣列
1) Array.prototype.isPrototypeOf(obj) 方法，判定 Array 是不是在 obj 的原型鏈中，如果是，則返回 true ,否則 false ;
2) obj instanceof Array ;
Object.prototype.toString.call(obj)；(==="[object Array]")
4) Array.isArray(obj) ;
4.行內元素和塊級元素有哪些？img屬於什麼元素？
塊元素(block element) * address - 地址 * blockquote - 塊引用 * center - 舉中對齊塊 * dir - 目錄列表 * div - 常用塊級容易，也是css layout的主要標籤 * dl - 定義列表 * fieldset - form控制組 * form - 互動表單 * h1 - 大標題 * h2 - 副標題 * h3 - 3級標題 * h4 - 4級標題 * h5 - 5級標題 * h6 - 6級標題 * hr - 水平分隔線 * isindex - input prompt * menu - 選單列表 * noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容 * noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容） * ol - 排序表單 * p - 段落 * pre - 格式化文字 * table - 表格 * ul - 非排序列表 內聯元素(inline element) * a - 錨點 * abbr - 縮寫 * acronym - 首字 * b - 粗體(不推薦) * bdo - bidi override * big - 大字型 * br - 換行 * cite - 引用 * code - 計算機程式碼(在引用原始碼的時候需要) * dfn - 定義欄位 * em - 強調 * font - 字型設定(不推薦) * i - 斜體 * img - 圖片 * input - 輸入框 * kbd - 定義鍵盤文字 * label - 表格標籤 * q - 短引用 * s - 中劃線(不推薦) * samp - 定義範例計算機程式碼 * select - 專案選擇 * small - 小字型文字 * span - 常用內聯容器，定義文字內區塊 * strike - 中劃線 * strong - 粗體強調 * sub - 下標 * sup - 上標 * textarea - 多行文字輸入框 * tt - 電傳文字 * u - 下劃線 * var - 定義變數 可變元素 可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。 * applet - java applet * button - 按鈕 * del - 刪除文字 * iframe - inline frame * ins - 插入的文字 * map - 圖片區塊(map) * object - object物件 * script - 客戶端指令碼
img 、 input 屬於行內替換元素。 height/width/padding/margin 均可用。效果等於塊元素。
5.margin塌陷？
當兩個盒子在垂直方向上設定 margin 值時，會出現塌陷現象
解決方法：
1.給父盒子新增border 2.給父盒子新增padding-top 3.給父盒子新增overflow:hidden 4.父盒子:position:fixed 5.父盒子:display:table 6.給子元素的前面新增一個兄弟元素 屬性為:content:""; overflow:hidden;
解決方法的主要原理就是設定盒子為 BFC
BFC 為頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。
6.偽類與偽元素的區別
1）偽類
偽類用於選擇 DOM 樹之外的資訊，或是不能用簡單選擇器進行表示的資訊。前者包含那些匹配指定狀態的元素，比如 :link，:visited，:hover，:active ；後者包含那些滿足一定邏輯條件的DOM樹中的元素，比如 :first-child，:first-of-type，：target 。
2）偽元素
偽元素為 DOM 樹沒有定義的虛擬元素。不同於其他選擇器，它不以元素元素為最小選擇單元，它選擇的是元素制定單元。比如 ::before 表示選擇元素內容的之前內容； ::selection 表示選擇元素被選中的內容。
3）偽類/偽元素一覽表
<偽類如下>
/* :active選擇正在被啟用的元素 :hover選擇被滑鼠懸浮著元素 :link選擇未被訪問的元素 :visited選擇已被訪問的元素 :first-child 選擇滿足是其父元素的第一個子元素的元素 :lang選擇帶有指定 lang 屬性的元素 :focus選擇擁有鍵盤輸入焦點的元素 :enable選擇每個已啟動的元素 :disable選擇每個已禁止的元素 :checked選擇每個被選中的元素 :target選擇當前的錨點元素 */
<偽元素如下>
/* ::first-letter選擇指定元素的第一個單詞 ::first-line選擇指定元素的第一行 ::after在指定元素的內容後面插入內容 ::before在指定元素的內容前面插入內容 ::selection選擇指定元素中被使用者選中的內容 */
7.介紹一下JS的基本資料型別
Undefined，Null，Boolean，Number，String
8.JavaScript的typeof返回那些資料型別
undefined，string，boolean，number，symbol(ES6)，object，function
9.介紹一下JS有哪些內建物件？
資料封裝類物件： Object、Array、Boolean、Number、String
其他物件： Function、Argument、Math、Date、RegExp、Error
10.null和undefined的區別
1） null 表示一個物件被定義了，值為“空值”； undefined 表示不存在這個值。
2）變數被定義了，但是沒有賦值時，就等於 undefined 。
3）注意：在驗證 null 時，要用 === ，因為 === 無法區分 null 和 undefined 。
typeof null // "object" 說明： null 是一個沒有任何屬性和方法的物件
11.對JSON的瞭解
1) JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。
2) 它是基於 JavaScript 的一個子集。資料格式簡單，易於讀寫，佔用頻寬小。 如： {"age":"12", "name":"back"}
12.列舉3種強制型別轉換和2種隱式型別轉換
強制： parseInt()，parseFloat()，Nunber() ，（ Boolean()，String() ）
隱式： == ， ！
13.input的type屬性有哪些？
text ：文字框
password ：密碼
radio ：單選按鈕
checkbox ：複選框
file ：檔案選擇域
hidden ：隱藏域
button ：按鈕
reset ：重置按鈕
submit ：表單提交按鈕
image ：圖片按鈕
14.IE和標準下有哪些相容性的寫法
var ev = ev || window.event document.documentElement.clientWidth || document.body.clientWidth var target = ev.srcElement||ev.target
15.如何阻止事件冒泡
ie :阻止冒泡 ev.cancelBubble = true ;
非 IE ev.stopPropagation() ;
16.如何阻止預設事件
1) return false ；2) ev.preventDefault() ;
