資訊專欄INFORMATION COLUMN
摘要：前言前段時間面試包括阿里巴巴的電話面試，遇到過一些面試題，且面試中出現(xiàn)機率較高的提問筆試，有些答的不是很好掛掉了，今天終于有時間整理出來分享給大家，希望對大家面試有所幫助，都能輕松拿。
前言
前段時間面試(包括阿里巴巴的電話面試)，遇到過一些面試題，且面試中出現(xiàn)機率較高的提問/筆試，有些答的不是很好掛掉了，今天終于有時間整理出來分享給大家，希望對大家面試有所幫助，都能輕松拿offer。
主要分三部分：html、css、js；react/vue等都歸類于js,內(nèi)容來源于面試過程中遇到的、在復習過程中看到認為值得加深鞏固、群友交流分享的；如有理解的錯誤或不足之處，歡迎留言糾錯、斧正，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官?蘇南(South·Su) ^_^～HTML
有些面試官會問你對盒子模型的理解，在我們平時看到的網(wǎng)頁中，內(nèi)部的每一個標簽元素它都是有幾個部分構成的：內(nèi)容(content)、外邊距(margin)、內(nèi)邊距(padding)、邊框(border)，四個部分組成，當你說完這些面試官是不會滿意這個答案的，因為還有一個重點（IE盒模型和標準盒模型的區(qū)別）———IE盒模型的content包括border、padding
link標簽引入，也是當下用的最多的一種方式，它屬于XHTML標簽，除了能加載css外，還能定義rel、type、media等屬性;
@import引入，@import是CSS提供的，只能用于加載CSS;
style?嵌入方式引入，減少頁面請求(優(yōu)點)，但只會對當前頁面有效，無法復用、會導致代碼冗余，不利于項目維護(缺點)，此方式一般只會項目主站首頁使用（騰訊、淘寶、網(wǎng)易、搜狐）等大型網(wǎng)站主頁，之前有看到過都是這種方式，但后來有些也舍棄了?
小結：link頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載,且link是XHTML標簽，無兼容問題; link支持動態(tài)js去控制DOM節(jié)點去改變樣式，而@import不支持，
行內(nèi)元素有：a、b、span、img、input、select、textarea、em、img、strong（強調(diào)的語氣）;
塊級元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form等;
空元素： input type="hidden"/>、br>、hr>、link>、meta>;?
小結：塊元素總是獨占一行，margin對內(nèi)聯(lián)元素上下不起作用;?
cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密），cookie數(shù)據(jù)始終在同源的http請求中攜帶，記會在瀏覽器和服務器間來回傳遞。?
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務器，僅在本地保存。
大小： cookie數(shù)據(jù)大小不能超過4k,sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
時效：localStorage 存儲持久數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失除非用戶主動刪除數(shù)據(jù)或清除瀏覽器/應用緩存；sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關閉后自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉部分面試官可能還會再深入一些：
1)、如何讓cookie瀏覽器關閉就失效？——不對cookie設置任何正、負或0時間的即可;
2)、sessionStorage在瀏覽器多窗口之間 (同域)數(shù)據(jù)是否互通共享? ——不會，都是獨立的，localStorage會共享;
3)、能讓localStorage也跟cookie一樣設置過期時間？答案是可以的，在存儲數(shù)據(jù)時，也存儲一個時間戳，get數(shù)據(jù)之前，先拿當前時間跟你之前存儲的時間戳做比較?詳細可看我之前寫的另一篇分享（小程序項目總結 ）。
語義化是指根據(jù)內(nèi)容的類型，選擇合適的標簽（代碼語義化）,即用正確的標簽做正確的事情;?html語義化讓頁面的內(nèi)容結構化，結構更清晰，有助于瀏覽器、搜索引擎解析對內(nèi)容的抓取;?語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結構與代碼結構;?搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;
CSSabsolute：絕對定位，元素會相對于值不為 static 的第一個父元素進行定位(會一直往父級節(jié)點查找)，且它是脫離正常文檔流、不占位的;
fixed:同樣是絕對定位，但元素會相對于瀏覽器窗口進行定位，而不是父節(jié)點的position (IE9以下不支持);
relative:相對定位，元素相對于自身正常位置進行定位,屬于正常文檔流;static: position的默認值，也就是沒有定位，當元素設置該屬性后（ top、bottom、left、right、z-index ）等屬性將失效;?
inherit:貌似沒用過，查了一下文檔“規(guī)定從父元素繼承 position 屬性的值”;
水平垂直居中 —— 方式一
水平垂直居中 —— 方式二
水平垂直居中 —— 方式三，（新舊伸縮盒兼容）
有，外邊距合并指的是，當兩個垂直元素的都設置有margin外邊距相遇時，它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的值中的較大那個。
單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）?;
雙冒號是在當前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時支持舊的已經(jīng)存在的偽元素寫法，比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法;
想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，之后則使用::after；?在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后。
如果按堆棧視角，::after生成的內(nèi)容會在::before生成的內(nèi)容之上;?
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff;//設置成元素原本的顏色
background-image: none;
color: rgb(0, 0, 0);
}
//方法2：由(licongwen )補充
input:-webkit-autofill {
-webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}
用圖片：如果是展示的內(nèi)容基本是固定不變的話，可以直接切圖兼容性也完美(不到萬不得已，不建議);
找UI設計師溝通：為了兼容各大主流瀏覽器，避免后期設計師來找你撕逼，主動找TA溝通，講明原因 ————注意語氣，好好說話不要激動，更不能攜刀相逼;
CSS3：css3的樣式transform: scale(0.7)，scale有縮放功能;
又去找chrome復習了一下，說是 “display:table;display: table-cell;” 可以做到，沒用過。
devicePixelRatio:它是window對象中有一個devicePixelRatio屬性，設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素;這種方式好麻煩，js檢測，再給元素添加類名控制，難維護;
切圖：直接.5px的切圖，這種方式太low，建議還是別用了，特別難維護，高清屏就糊了,更重要的是被同行看到會覺得你們很渣渣～;
image背景：css3的background-image:linear-gradient，缺點就是：樣式多，遇到圓角這個方案就杯劇了;?box-shadow:網(wǎng)上看到說使用box-shadow模擬邊框，box-shadow: inset 0px -1px 1px -1px #06c;沒用過，不過多評論，建議自己百度;
偽類縮放：現(xiàn)在用的比較多的方式之一 :after 1px然后transform: scale(0.5);基本能滿足所有場景，對于圓角的處理也很方便;
貼上3、5兩方案代碼，也是目前公司一直在用的(預處理SCSS)：
//3、css3的background-image 本文由@IT·平頭哥聯(lián)盟-首席填坑官?蘇南分享
@mixin border($top:1, $right:1, $bottom:1, $left:1, $color:#ebebf0) {
background-image:linear-gradient(180deg, $color, $color 50%, transparent 50%),
linear-gradient(90deg, $color, $color 50%, transparent 50%),
linear-gradient(0deg, $color, $color 50%, transparent 50%),
linear-gradient(90deg, $color, $color 50%, transparent 50%);
background-size: 100% $top + px, $right + px 100%, 100% $bottom + px, $left + px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top ;
}
@mixin borderTop($top:1, $color:#ebebf0) {
@include border($top, 0, 0, 0, $color);
}
@mixin borderRight($right:1, $color:#ebebf0) {
@include border(0, $right, 0, 0, $color);
}
@mixin borderBottom($bottom:1, $color:#ebebf0) {
@include border(0, 0, $bottom, 0, $color);
}
@mixin borderLeft($left:1, $color:#ebebf0) {
@include border(0, 0, 0, $left, $color);
}
@mixin borderColor($color:#ebebf0) {
@include border(1, 1, 1, 1, $color);
}
//5、css3的transform:scale 本文由平頭哥聯(lián)盟-首席填坑官?蘇南分享
@mixin borderRadius($width:1,$style:solid,$color:#ebebf0,$radius:2px) {
position:relative;
&:after{
left:0px;
top:0px;
right:-100%;
bottom:-100%;
border-radius:$radius;
border-style: $style;
border-color: $color;
border-width: $width+ px;
position:absolute;
display:block;
transform:scale(0.5);
-webkit-transform:scale(0.5);
transform-origin:0 0;
-webkit-transform-origin:0 0;
content:"";
}
}
display:none在頁面中是不占位置的，而visibility:hidden保留原來的位置后;
display：none顯示/隱藏 頁面會產(chǎn)生回流和重繪的問題，visibility則不會 ——重繪/回流請看JS部分第七題;
Javascript//本文由@IT·平頭哥聯(lián)盟-首席填坑官?蘇南分享,如有錯誤，歡迎留言
function b(){
var a=1;
};
function b(){
var a=1;
return ()=>{
a++;
return a;
}
};
let c = b();
c(); //2
c(); //3
c(); //4
ECMAScript 標準定義有7種數(shù)據(jù)類型：??
Boolean
Null
Undefined
Number
String
Symbol?:（ECMAScript 6 新定義 ，Symbol 生成一個全局唯一、表示獨一無二的值）?
Object?:（Array、Function、Object）
//方法1:
var separator=(num)=>{
if(!num){
return "0.00";
};
let str = parseFloat(num).toFixed(2);
return str && str
.toString()
.replace(/(d)(?=(d{3})+.)/g, function($0, $1) {
return $1 + ",";
});
}
separator(386485473.88) //"386,485,473.88"
//方法2：
(386485473.88).toLocaleString("en-US") // "386,485,473.88" 由 (sRect)補充
遍歷數(shù)組時的異同： for循環(huán) 數(shù)組下標的typeof類型:number, for in 循環(huán)數(shù)組下標的typeof類型:string;