2019屆校招前端面試題整理——HTML、CSS篇

時間 2019-11-06

標籤端面試題整理 html css 欄目 HTML 简体版

原文原文鏈接

前言

2019屆校招陸陸續續開始了，整理了一些高頻的面試題。javascript

HTML部分

1. 什麼是<!DOCTYPE>？css

DOCTYPE是html5標準網頁聲明，且必須聲明在HTML文檔的第一行。來告知瀏覽器的解析器用什麼文檔標準解析這個文檔。
html

文檔解析類型有：html5

BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。（若是沒有聲明DOCTYPE，默認就是這個模式）
CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

2. meta標籤java

提供給頁面的一些元信息（名稱/值對），有助於SEO。
css3

屬性值：web

name：名稱/值對中的名稱。author、description、keywords、generator、revised、others。把 content 屬性關聯到一個名稱。
http-equiv：沒有name時，會採用這個屬性的值。content-type、expires、refresh、set-cookie。把content屬性關聯到http頭部
content ：名稱/值對中的值，能夠是任何有效的字符串。始終要和 name 屬性或 http-equiv 屬性一塊兒使用
scheme ：用於指定要用來翻譯屬性值的方案

3. HTML語義化面試

用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器，搜索引擎解析；
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的；
搜索引擎的爬蟲也依賴於HTML標記肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

4. 常見的瀏覽器內核算法

Trident內核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
Presto內核：Opera7及以上。[現爲：Blink]
Webkit內核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

5. 簡單介紹對瀏覽器內核的理解canvas

主要分紅兩部分：渲染引擎和JS引擎。

渲染引擎：將代碼轉換成頁面。負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）、以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其餘須要編輯、顯示網絡內容的應用程序都須要內核。
JS引擎：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分得很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

6. HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標籤的瀏覽器兼容問題？

新特性：

(1) 用於繪畫的canvas元素；

(2) 用於媒介回放的video和audio元素；

(3) 對本地離線存儲有更好的支持，localStorage長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage的數據在瀏覽器關閉後自動刪除；

(4) 語意化更好的內容元素，好比header,nav,section,article,footer；

(5) 新的表單控件：calendar,date,time,email,url,search；

(6) 新的技術webworker,websockt、Geolocation；

移除元素：

(1) 純表現的元素：basefont,big,center,font,s,strike,tt,u;

(2) 對可用性產生負面影響的元素：frame,frameset,noframes;

處理兼容性問題：

IE8/IE7/IE6支持document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

7. html5哪些標籤能夠作SEO優化？

title、meta、header、footer、nav、article、aside

8. src和href的區別

src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標籤所在的位置，在請求src資源時會將其指向的資源下載並應用到文檔內，如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，知道將該資源加載、編譯、執行完畢，因此通常js腳本會放在底部而不是頭部。
href是指網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

9. 漸進加強和優雅降級

漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能，達到更好的用戶體驗。
優雅降級：一開始就構建完整的功能，而後再針對低版本的瀏覽器進行兼容。

10. defer和async的區別

defer要等到整個頁面在內存中正常渲染結束（DOM結構徹底生成，以及其餘腳本執行完成），纔會執行。多個defer腳本會按照它們在頁面出現的順序加載。==「渲染完再執行」==
async一旦下載完，渲染引擎就會中斷渲染，執行這個腳本之後，再繼續渲染。多個async腳本是不能保證加載順序的。==「下載完就執行」==

11. 如何實現瀏覽器內多個標籤頁之間的通訊？

方法一：調用localstorge

標籤頁1：

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //存儲須要的信息 
        });     
   });    
</script>

標籤頁2：

$(function(){   
    window.addEventListener("storage", function(event){    
       console.log(event.key + "=" + event.newValue);    
    });     //使用storage事件監聽添加、修改、刪除的動做  
});

方法二：使用cookie+setInterval

將要傳遞的信息存儲在cookie中，每隔必定時間讀取cookie信息，便可隨時獲取要傳遞的信息。

標籤頁1：

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});

標籤頁2：

$(function(){   
    function getCookie(key) {    
       return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
    }     
    setInterval(function(){    
       console.log("name=" + getCookie("name"));    
    }, 10000);    
});

CSS部分

1. css盒模型

IE盒模型 box-sizing:border-box;（怪異模式）；
W3C標準盒模型 box-sizing:content-box;（標準模式）。

應用場景：

（1）表單：
表單中有一些input元素其實仍是展示的是傳統IE盒模型，帶有一些默認的樣式，並且在不一樣平臺或者瀏覽器下的表現不一，形成了表單展示的差別。此時咱們能夠經過box-sizing屬性來構建一個風格統一的表單元素。

（2）設置子類元素的margin或者border時，可能會撐破父層元素的尺寸，這時我就須要使用box-sizing: border-box來將border包含進元素的尺寸中，這樣就不會存在撐破父層元素的狀況了。

2. 行內元素和塊級元素的區別？行內塊級元素的兼容性使用？（IE8如下）

塊級元素：div,p,h1,form,ul,li

（1）各佔一行，垂直方向排列；

（2）能夠包含其餘塊級或者行內元素；

（3）高度、行高以及外邊距和內邊距均可控制；

（4）默認寬度是它自己父容器的100%（和父元素的寬度一致），與內容無關。

行內元素：span,a,label,input,img,strong,em

（1）水平方向排列，不會自動換行；

（2）不能夠包含塊級元素，可是能夠包含其餘行內元素或者文本；

（3）行內元素設置width、height無效(能夠設置line-height)，margin和padding上下無效；

（4）寬度就是它的文字和圖片的寬度，不可改變。

行內塊級元素在IE8如下的兼容性（塊元素模擬inline-block）

div {
    display： inline-block；
    zoom： 1；   //在IE下觸發hasLayout
    display：inline；//一旦觸發了hasLayout設置display：inline和display：block效果類似。
}

haslayout 是IE7-瀏覽器的特有屬性。hasLayout是一種只讀屬性，有兩種狀態：true或false。當其爲true時，表明該元素有本身的佈局，不然表明該元素的佈局繼承於父元素。

注意: 經過element.currentStyle.hasLayout能夠得出當前元素的hasLayout狀況。

3. 頁面導入樣式時，使用link和@import有什麼區別？

（1）link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

（2）link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

（3）link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器（IE5如下）不支持。

（4）link支持使用Javascript控制DOM去改變樣式；而@import不支持。

4. 清除浮動有哪些方式？

（1）在浮動元素下方添加一個非浮動元素

<div>
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
    <div style="clear:both;"></div>
</div>

父容器如今必須考慮非浮動子元素的位置，然後者確定出如今浮動元素下方，因此顯示出來，父容器就把全部子元素都包括進去了。這種方法比較簡單，可是要在頁面中增長冗餘標籤，違背了語義網的原則。

（2）將父容器也改爲浮動定位

<div style="float:left;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>

這種方法不用修改HTML代碼，可是缺點在於父容器變成浮動之後，會影響到後面元素的定位，並且有時候，父容器是定位死的，沒法變成浮動。

（3）父容器設置overflow: hidden或者auto。（開啓BFC）

<div style="overflow: hidden;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>

缺點：一個是IE6不支持，另外一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。

（4）利用:after僞選擇符，在父容器的尾部自動建立一個子元素 ==（推薦這種）==

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
//兼容ie6：激活父元素的"hasLayout"屬性，讓父元素擁有本身的佈局
.clearfix {
    zoom: 1;  //或者height：1%；
}

5. 簡單介紹BFC和IFC

BFC —— 塊級格式化上下文

（1）BFC觸發條件：

根元素或其餘包含他的元素
浮動元素 float：left/right
position：absolute/fixed
display：inline-block,table-cell,table-caption
overflow不爲visible
彈性盒子：display: flex 或 inline-flex

（2）BFC特性

內部的Box會在垂直方向上一個接一個的放置；
垂直方向的距離有margin決定(屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關)；
每一個元素的margin box的左邊，與包含塊border； box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此；
BFC的區域不會與float的元素區域重疊；
計算BFC的高度時，浮動子元素也參與計算，能夠解決父元素高度塌陷問題；
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然；
文檔流中的BFC元素, width爲auto時，會佔滿當前行的剩餘寬度。

（3）應用

阻止兩個相鄰的普通流中的塊元素垂直方向上的margin摺疊；
BFC能夠包含浮動元素，撐開父元素；
BFC能夠阻止元素被浮動元素覆蓋。

（4）BFC與hasLayout

IE6-7不支持BFC，而是使用私有屬性hasLayout，要用zoom：1觸發hasLayout屬性。Zoom用於設置或檢索元素的縮放比例，值爲「1」即便用元素的實際尺寸。

IFC —— 行內格式化上下文

（1）建立方式：

和BFC相比，它的建立方式是被動的、隱式的，是由所包含的子元素來建立：只有在一個區域內僅包含可水平排列的元素時纔會生成，這些子元素能夠是文本、inline-level元素或inline-block-level元素。

（2）特性：

IFC內部的元素，按從左到右、從上到下的順序排布；
IFC內部的每一個元素，均可以經過設置vertical-align屬性，來調整在垂直方向上的對齊；
包含這些內部元素的矩形區域，造成的每一行，被稱爲line box（行框）。

6. 選擇器優先級

！important>行內樣式>id選擇器>類選擇器>標籤選擇器>通配符>繼承

權重算法：(0,0,0,0) ——> 第一個0對應的是important的個數，第二個0對應的是id選擇器的個數，第三個0對應的類選擇器的個數，第四個0對應的是標籤選擇器的個數，合起來就是當前選擇器的權重。

比較：先從第一個0開始比較，若是第一個0大，那麼說明這個選擇器的權重高，若是第一個相同，比較第二個，依次類推。

7. 怎麼實現水平垂直居中

（1）行內元素的水平居中

text-align: center;
line-height: 100px;

（2）塊級元素水平居中

margin: 0 auto;

（3）已知高度寬度元素的水平垂直居中

利用絕對定位和負邊距實現

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}

利用絕對定位和margin

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

（4）未知高度和寬度元素的水平垂直居中

被居中的元素是inline或者inline-block元素

.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

css3的transform屬性

.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex佈局

.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

最簡單的寫法：

.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}

8. 實現左邊定寬，右邊自適應佈局

（1）左盒子左浮動，右盒子width=100%

（2）左盒子左浮動，右盒子margin-left=左盒子寬度

（3）左盒子左浮動，右盒子右浮動，設置width: calc（100% - 左盒子寬度）

（4）父容器設置display：flex，右盒子flex：1

9. 實現中間自適應寬度，左右兩欄固定寬度佈局

兩招搞定三欄佈局——聖盃佈局、雙飛翼佈局

10. 脫離文檔流

(1) 浮動脫離文檔流：使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。

(2) 絕對定位脫離文檔流：使用absolute: position | fixed 脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。

11. CSS3新特性

顏色：新增RGBA、HSLA模式
文字陰影(text-shadow)
邊框：圓角（border-radius）邊框陰影：box-shadow
盒子模型：box-sizing
背景：background-size設置背景圖片的尺寸，background-origin設置背景圖片的原點，background-clip設置背景圖片的裁剪區域，以「，」分隔能夠設置多背景，用於自適應佈局
漸變：linear-gradient、radial-gradient
過渡：transition可實現動畫
自定義動畫
在CSS3中惟一引入的僞元素是::selection
多媒體查詢、多欄佈局
border-image
2D轉換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
3D轉換

12. display:none;與visibility:hidden的區別是什麼？

(1) display:none; HTML元素（對象）的寬高，高度等各類屬性值都將「丟失」,視爲不存在，並且不加載。

(2) visibility:hidden; HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在，也便是說它仍然具備高度，寬度等屬性值。

13. 響應式佈局原理

媒體查詢，查詢到當前屏幕(媒介媒體)的寬度，針對不一樣的屏幕寬度設置不一樣的樣式來適應不一樣屏幕。

14. flex佈局

flex佈局能夠看阮一峯老師的這兩篇文章： Flex 佈局教程：語法篇， Flex 佈局教程：實例篇，講的很是詳細。

（1）設置在容器上的屬性

flex-direction：row | row-reverse | column | column-reverse 項目的排列方向
flex-wrap：nowrap | wrap | wrap-reverse 是否換行
flex-flow：<flex-direction> || <flex-wrap> flex-direction和 flex-wrap的簡寫
justify-content：flex-start | flex-end | center | space-between | space-around 在水平方向上的對齊方式
align-items: flex-start | flex-end | center | baseline | stretch 定義在垂直方向上的對齊方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch 定義了多根軸線的對齊方式，若是項目只有一根軸線，那麼該屬性將不起做用(item有多行時)

（2）設置在項目上的屬性

order：<number> 定義項目在容器中的排列順序，數值越小，排列越靠前，默認值爲 0
flex-basis：<length> | auto 定義了在分配多餘空間以前，項目佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間
flex-grow: <number> 定義項目的放大比例。默認值爲 0，即若是存在剩餘空間，也不放大
flex-shrink: <number> 定義項目的縮小比例。默認值: 1，即若是空間不足，該項目將縮小，負值對該屬性無效。
flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink 和 flex-basis的簡寫默認值：0 1 auto，即不放大，可縮小，大小就是項目自己的大小。
align-self：auto | flex-start | flex-end | center | baseline | stretch 容許單個項目有與其餘項目不同的對齊方式