前端面試題整合（基礎篇）

瀏覽器的內核
IE: trident內核，Firefox：gecko內核，Safari:webkit內核，Opera:之前是presto內核，Opera現已改用Google Chrome的Blink內核，Chrome:Blink(基於webkit，Google與Opera Software共同開發)css
HTML中的Doctype有什麼做用
此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
html
div+css的佈局較table佈局有什麼優勢
改版的時候更方便只要改css文件。頁面加載速度更快、結構化清晰、頁面顯示簡潔。表現與結構相分離。易於優化（seo）搜索引擎更友好，排名更容易靠前
前端
img的alt與title有何異同？ strong與em的異同？
alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)
title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。
strong:粗體強調標籤，強調，表示內容的重要性。
em:斜體強調標籤，更強烈強調，表示內容的強調點。

html5
漸進加強和優雅降級之間的不一樣
漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。
css3
爲何利用多個域名來存儲網站資源會更有效？
CDN緩存更方便
突破瀏覽器併發限制
節約cookie帶寬
節約主域名的鏈接數，優化頁面響應速度
防止沒必要要的安全問題

web
cookies，sessionStorage和localStorage的區別
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。
算法
src與href的區別
簡單來說，src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

src：src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
harf：href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加 <link href=」common.css」 rel=」stylesheet」/> 那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

chrome
什麼是微格式，談談理解
微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化數據的開放標準。是爲特殊應用而制定的特殊格式。優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。
跨域
在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？
dns緩存，cdn緩存，瀏覽器緩存，服務器緩存
瀏覽器
優化大型網站加載圖片方案
圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。
HTML結構的語義化
html自己是沒有表現的，咱們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認爲這是html的表現，這些其實html默認的css樣式在起做用，因此去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優勢，可是瀏覽器都有有默認樣式，默認樣式的目的也是爲了更好的表達html的語義，能夠說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。
有哪項方式能夠對一個DOM設置它的CSS樣式
外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在 <head> 標籤內部
內聯樣式，將css樣式直接定義在 HTML 元素內部
CSS都有哪些選擇器
派生選擇器（用HTML標籤申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）

屬性選擇器（a[rel = "external"]）
除了前3種基本選擇器，還有一些擴展選擇器，
包括後代選擇器（利用空格間隔，好比div .a{ }）
相鄰選擇器（利用加號間隔，h1 + p）
羣組選擇器（利用逗號間隔，好比p,div,#a{ }）
通配符選擇器（ * ）
僞類選擇器（a: hover, li: nth - child）
CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內
設置display屬性爲none，或者設置visibility屬性爲hidden
設置寬高爲0，設置透明度爲0，設置z-index位置在-1000em
超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？
被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

什麼是Css Hack？ie6,7,8的hack分別是什麼？
針對不一樣的瀏覽器寫不一樣的CSS code的過程，就是CSS hack。
示例以下：

#test{   
        width:300px;   
        height:300px;   
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/    }  
        :root #test { background-color:purple\9; }  /*ie9*/
@media all and (min-width:0px)
     { #test {background-color:black;} }  /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} }       /*chrome and safari*/

行內元素和塊級元素的具體區別是什麼？
塊級元素(block)特性：老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示; 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;
內聯元素(inline)特性：和相鄰的內聯元素在同一行;
什麼是外邊距重疊？有什麼效果
外邊距重疊就是margin-collapse。在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。
摺疊結果遵循下列計算規則：兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。兩個外邊距一正一負時，摺疊結果是二者的相加的和。
rgba()和opacity的透明效果有什麼不一樣？
rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）
水平垂直居中一個浮動元素

方法一：position 加 margin

方法二： diaplay:table-cell

方法三：position 加 transform

方法四：flex;align-items: center;justify-content: center

方法五：display:flex;margin:auto

方法六：純 position

方法七：兼容低版本瀏覽器，不固定寬高
講一下你對盒模型的瞭解
有padding、margin、border、content屬性
box-sizing: content-box 是W3C盒子模型，元素的width和height屬性只包含內容content部分，不包含內邊距padding和邊框border部分。
box-sizing: border-box 是IE盒子模型，元素的width和height屬性同時包含內容content，內邊距padding和邊框border部分
position定位
Relitive: 相對於自身,會指引子元素相對於他自身進行定位
Absolute: 根據父元素的relitive進行定位
Fixed:現對於window窗口定位
rem原理與em/ vw/vh 區別
Rem是基於根元素的字體大小發生改變,而em是基於body的字體大小發生改變
1.由於html5和css3引入視口的概念來代替顯示器的物理尺寸。經過在meta標籤上的設置，視口的長寬能夠跟設備的物理分辨率相等，也能夠不相等（以便手機上能夠實現用兩個手指來放大會縮小頁面），可根據須要靈活掌握。在PC中，視口的長寬則是跟瀏覽器窗口的物理分辨率恆等的。
2. 1vw等於視口寬度（viewport width）的百分之一，也就是說100vw就是視口的寬度。同理，1vh等於視30px改爲5vw，意思就是窗口寬度的5%，同理10vw。
3.不過因爲vw和vh是css3才支持的長度單位，因此在不支持css3的瀏覽器中是無效的口高度（viewport height）的百分之一。
Css3的動畫
@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。
Sass、LESS是什麼，優勢
他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。
優勢：
結構清晰，便於擴展。
能夠方便地屏蔽瀏覽器私有語法差別。
封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。
能夠輕鬆實現多重繼承。
徹底兼容 CSS 代碼，能夠方便地應用到老項目中。
LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。
display:none與visibility:hidden的區別是什麼？
display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素而且擠佔該元素原來的空間。
便是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。
CSS中link和@import的區別
Link屬於html標籤，而@import是CSS中提供的
在頁面加載的時候，link會同時被加載，而@import引用的CSS會在頁面加載完成後纔會加載引用的CSS
@import只有在ie5以上才能夠被識別，而link是html標籤，不存在瀏覽器兼容性問題 Link引入樣式的權重大於@import的引用（@import是將引用的樣式導入到當前的頁面中）
BFC是什麼
BFC（塊級格式化上下文），一個建立了新的BFC的盒子是獨立佈局的，盒子內元素的佈局不會影響盒子外面的元素。在同一個BFC中的兩個相鄰的盒子在垂直方向發生margin重疊的問題 BFC是指瀏覽器中建立了一個獨立的渲染區域，該區域內全部元素的佈局不會影響到區域外元素的佈局，這個渲染區域只對塊級元素起做用
html常見兼容性問題
1.雙邊距BUG float引發的使用display
2.3像素問題使用float引發的使用dislpay:inline -3px
3.超連接hover 點擊後失效使用正確的書寫順序 link visited hover active
4.Ie z-index問題給父級添加position:relative
5.Png 透明使用js代碼改
6.Min-height 最小高度！Important 解決’
7.select 在ie6下遮蓋使用iframe嵌套
8.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解決辦法： .opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }
10. IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片
行內元素有哪些?塊級元素有哪些?空(void)元素有哪些？
塊級元素：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 – 非排序列表
行內元素:a – 錨點 abbr – 縮寫 acronym – 首字 b – 粗體(不推薦) big – 大字體 br – 換行 em – 強調 font – 字體設定(不推薦) i – 斜體 img – 圖片 input – 輸入框 label – 表格標籤 s – 中劃線(不推薦) select – 項目選擇 small – 小字體文本 span – 經常使用內聯容器，定義文本內區塊 strike – 中劃線 strong – 粗體強調 sub – 下標 sup – 上標 textarea – 多行文本輸入框 tt – 電傳文本 u – 下劃線 var – 定義變量
知名的空元素：<br><hr><img><input><link><meta>不爲人知的是： <area><base><col><command> <embed><keygen><param><source><track><wbr>
前端頁面有哪三層構成
結構層 Html 表示層 CSS 行爲層 js
CSS哪些屬性能夠繼承？
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承：border padding margin width height ;
CSS優先級算法（權重）
優先級就近原則，樣式定義最近者爲準
載入樣式以最後載入的定位爲準
!important> 內聯 > id > class > tag
高度自適應，寬度是高度的一半，如何佈局
利用padding-top/bottom/left/right屬性在設置爲百分比時按照父元素的寬度來進行設置，能夠經過設置padding-top/bottom：100%；padding-left/right:50%;將元素撐開，使用需注意設置父元素的寬度，特別是在父元素的寬度是繼承的狀況下，也可更具狀況只設置父元素的寬度而不設置高度來隱藏父元素；

相似聖盃佈局的多種代碼方式
聖盃佈局是一種很常見的css佈局。
要求：
一、上部和下部各自佔領屏幕全部寬度。
二、上下部之間的部分是一個三欄佈局。
三、三欄佈局兩側寬度不變，中間部分自動填充整個區域。
四、中間部分的高度是三欄中最高的區域的高度。

浮動實現
外層框架
<div class="header">這裏是頭部</div>
<div class="container"></div>
<div class="footer">這裏是底部</div>
.header,.footer{
    height:200px;
    width:100%;
    background:red;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
填充三欄
這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一塊兒浮動。
另外：把中，左，右三個區域設置成度浮動。給左右兩塊區域固定的寬度，中間部分的寬度設置成100%。
這樣實現下來，由於浮動的關係，[middle]會佔據[container]的全部部分，而左右兩塊區域都會被擠到下面，可是，因爲第一步設置了內邊距的關係，[container]的左右各剩餘了一塊區域，且寬度與左右區域相同。
<div class="header">這裏是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這裏是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}.container div{
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    width:300px;
    background:aqua;
}
移動左側區域
接下來要作的就是把左右兩塊區域挪到空出來的內邊距空間裏去。
先移動左邊，新加一個樣式 margin-left:-100%。這樣一來，由於浮動關係，就把左邊塊上移到了[middle]左側，與其交織在一塊兒，而右側欄就自動往左移動。而後再給左側欄一個偏移量，偏移量剛好是其寬度，這一步要給[container]的position設成relative
<div class="header">這裏是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這裏是底部</div>
.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
}
移動右邊
同上一步的原理同樣，把右側區域也給弄上去，設置負外邊距和自己寬度相同就好了。
<div class="header">這裏是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這裏是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
    margin-right:-300px;
}

 


flexbox彈性盒子實現
彈性盒子用來實現聖盃佈局特別簡單。只須要把中間的部分用flex佈局便可。
<div class="header">這裏是頭部</div>
<div class="container">
    <div class="left">左邊</div>
    <div class="middle">中間部分</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這裏是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.container{
    display: flex;
}
.middle{
    flex: 1;
    background:yellow;
}
.left{
width:200px;
    background:pink;
}
.right{
    background: aqua;
    width:300px;
}
很簡單，在寫html的時候，由於再也不涉及到浮動，只須要按照左中右的順序來寫就能夠了。左右兩塊區域的寬度寫死，把中間的區域的flex屬性設置成1就能夠了。
css grid網格
grid是一種新的佈局方式，截止2018年初，絕大多數瀏覽器都已經支持css grid。
其原理就是把頁面的區域劃分紅一個一個的網格，就和圍棋的棋盤同樣。
用網格來解決聖盃問題，能夠擺脫彈性盒子時須要格外加一個[container]的問題，也就是左中右三款區域不須要在他們外邊包裝一個額外的div。
<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</footer></div>
  
body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}
簡單說一下代碼的實現。回頭會專門看一下css grid的細節。
首先給最外層的body設成display:grid。固然，是外層父級元素便可，不必定是body。
grid-row就是說由上到下，#header佔據第1格，#left,#middle,#right佔據第2格，#footer佔據第3格。
而grid-column表示，在橫向從左向右，分紅了五格。其中#header和#footer佔據所有。#left佔據第1格，#middle佔據第2到第4格，#right佔據第5格。
無論是實現起來仍是理解起來都很方便。