前端工程師面試題(html+css)

極客教程發表於2019-03-04
前端工程師面試題HTMLCSS
image.png

正值金九銀十的招聘旺季，我把我珍藏整理多年的前端面試題分享給大家，分三部分。這是第一部分,html和css佈局相關的。

1. HTML5相關

1.1 新特性、移除了那些元素

HTML5 現在已經不是 SGML 的子集，主要是關於影像，位置，儲存，多工等功能的增加。

新特性(包括標籤):

  • 繪畫 canvas;
  • 用於媒介回放的 video 和 audio 元素;
  • 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
    sessionStorage 的資料在瀏覽器關閉後自動刪除;
  • 語意化更好的內容元素，比如 article、footer、header、nav、section;
  • 表單控制元件，calendar、date、time、email、url、search;
  • 新的技術webworker, websocket, Geolocation;

移除的元素：

  • 純表現的元素：basefont，big，center，font, s，strike，tt，u;
  • 對可用性產生負面影響的元素：frame，frameset，noframes；

1.2 處理HTML5新標籤的瀏覽器相容問題

支援HTML5新標籤：
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。

當然也可以直接使用成熟的框架、比如html5shim;

<!--[if lt IE 9]>
 <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
複製程式碼

1.3 區分 HTML 和 HTML5

DOCTYPE宣告新增的結構元素功能元素

1.4 HTML語義化的理解

用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
及時在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的;
搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

1.5 HTML5離線儲存

在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案。

**原理：**HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。

如何使用：

  1. 頁面頭部像下面一樣加入一個manifest的屬性；
  2. 在cache.manifest檔案的編寫離線儲存的資源；
    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
  3. 在離線狀態時，操作window.applicationCache進行需求實現。

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。

2. HTML標籤相關

2.1 iframe有那些缺點？

  • iframe會阻塞主頁面的Onload事件；
  • 搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;
  • iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。

使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態給iframe新增src屬性值，這樣可以繞開以上兩個問題。

2.2 Label的作用是什麼

label標籤來定義表單控制間的關係,當使用者選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>
複製程式碼

2.3 如何實現瀏覽器內多個標籤頁之間的通訊?

WebSocket、SharedWorker；
也可以呼叫localstorge、cookies等本地儲存方式；

localstorge另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面資訊通訊；
注意quirks：Safari 在無痕模式下設定localstorge值時會丟擲 QuotaExceededError 的異常；

2.4 webSocket如何相容低瀏覽器？

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼傳送 XHR 、
基於長輪詢的 XHR

2.5 字型標籤的區別

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面資訊的抓取也有很大的影響；

strong是標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時：<strong>會重讀，而<b>是展示強調內容。

i內容展示為斜體，em表示強調的文字；

Physical Style Elements — 自然樣式標籤
b, i, u, s, pre
Semantic Style Elements — 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時首選使用自然樣式標籤。

3. css部分(1)

3.1 盒子模型

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的content部分把 border 和 pading計算了進去;

3.2 css選擇符與屬性繼承

選擇符:
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.萬用字元選擇器（ * ）
8.屬性選擇器（a[rel = “external”]）
9.偽類選擇器（a:hover, li:nth-child）

可繼承的樣式:
font-size font-family color ul li dl dd dt

不可繼承的樣式:
border padding margin width height

3.3 優先順序演算法

  • 優先順序就近原則，同權重情況下樣式定義最近者為準;

  • 載入樣式以最後載入的定位為準;

優先順序為:
!important > id > class > tag
important 比 內聯優先順序高

3.4 css3新增偽類

 舉例：
    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
    p:only-of-type  選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
    p:only-child        選擇屬於其父元素的唯一子元素的每個 <p> 元素。
    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。

    :after          在元素之前新增內容,也可以用來做清除浮動。
    :before         在元素之後新增內容
    :enabled        
    :disabled       控制表單控制元件的禁用狀態。
    :checked        單選框或核取方塊被選中。
複製程式碼

3.5 css居中

給div設定一個寬度，然後新增margin:0 auto屬性

div{
    width:200px;
    margin:0 auto;
 }
複製程式碼

讓絕對定位的div居中

  position: absolute;
  width: 1200px;
  background: none;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
複製程式碼

水平垂直居中一

  確定容器的寬高 寬500 高 300 的層
  設定層的外邊距

 div {
      position: relative;     /* 相對定位或絕對定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;      /* 外邊距為自身寬高的一半 */
    background-color: pink;     /* 方便看效果 */
 }
複製程式碼

水平垂直居中二

未知容器的寬高，利用 `transform` 屬性

div {
    position: absolute;     /* 相對定位或絕對定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;     /* 方便看效果 */

}
複製程式碼

水平垂直居中三

利用 flex 佈局
實際使用時應考慮相容性

.container {
    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

}
.container div {
    width: 100px;
    height: 100px;
    background-color: pink;     /* 方便看效果 */
}  
複製程式碼

3.6 display值及作用

block         象塊型別元素一樣顯示。
none          預設值。象行內元素型別一樣顯示。
inline-block  象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。
list-item     象塊型別元素一樣顯示，並新增樣式列表標記。
table         此元素會作為塊級表格來顯示
inherit       規定應該從父元素繼承 display 屬性的值
複製程式碼

3.7 position定位

absolute
    生成絕對定位的元素，相對於值不為 static的第一個父元素進行定位。
fixed （老IE不支援）
    生成絕對定位的元素，相對於瀏覽器視窗進行定位。
relative
    生成相對定位的元素，相對於其正常位置進行定位。
static
    預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告）。
inherit
    規定從父元素繼承 position 屬性的值。
複製程式碼

3.8 css3新特性

  新增各種CSS選擇器  （: not(.input)：所有 class 不是“input”的節點）
  圓角           （border-radius:8px）
  多列布局        （multi-column layout）
  陰影和反射        （ShadowReflect）
  文字特效      （text-shadow、）
  文字渲染      （Text-decoration）
  線性漸變      （gradient）
  旋轉          （transform）
  增加了旋轉,縮放,定位,傾斜,動畫，多背景
  transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:
複製程式碼

3.9 建立一個三角形

把上、左、右三條邊隱藏掉（顏色設為 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}
複製程式碼

3.10 瀏覽器相容

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

* 瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。

  浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

  這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)

  漸進識別的方式，從總體中逐漸排除區域性。

  首先，巧妙的使用“9”這一標記，將IE遊覽器從所有情況中分離出來。
  接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
          background-color:#f1ee18;/*所有識別*/
          .background-color:#00deff9; /*IE6、7、8識別*/
          +background-color:#a200ff;/*IE6、7識別*/
          _background-color:#1e0bd1;/*IE6識別*/
      }

*  IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
   也可以使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性。
   解決方法:統一通過getAttribute()獲取自定義屬性。

*  IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;
   Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性。

*  解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

*  Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示,
   可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}
複製程式碼

3.11 li之前空白間隔

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬於字元,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字元大小設為0，就沒有空格了。

3.12 為什麼要初始化css樣式

- 因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

- 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）

淘寶的樣式初始化程式碼：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
複製程式碼

4. css部分(2)

4.1 BFC規範

（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）
一個頁面是由很多個 Box 組成的,元素的型別和 display 屬性,決定了這個 Box 的型別。
不同型別的 Box,會參與不同的 Formatting Context（決定如何渲染文件的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
更多詳細內容請看CSS中的BFC

4.2 css定義權重

以下是權重的規則：標籤的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：

/*權重為1*/
div{
}
/*權重為10*/
.class1{
}
/*權重為100*/
#id1{
}
/*權重為100+1=101*/
#id1 div{
}
/*權重為10+1=11*/
.class1 div{
}
/*權重為10+10+1=21*/
.class1 .class2 div{
}

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現
複製程式碼

4.3 css浮動

請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式：

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
浮動元素引起的問題和解決辦法？

浮動元素引起的問題：
父元素的高度無法被撐開，影響與父元素同級的元素與浮動元素同級的非浮動元素（內聯元素）會跟隨其後若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構解決方法： 使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，新增如下樣式，給父元素新增clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
複製程式碼

清除浮動的幾種方法：

  • 額外標籤法
<div style="clear:both;"></div>
複製程式碼

（缺點：不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。）

  • 使用after偽類
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
複製程式碼

注意這裡是給父元素加

  • 設定overflow為hidden或者auto
給包含浮動元素的父標籤新增css屬性 overflow:auto; zoom:1; //zoom:1用於相容IE6。
複製程式碼

4.4 cookie隔離

如果靜態檔案都放在主域名下，那靜態檔案請求的時候都帶有的cookie的資料提交給server的，非常浪費流量，
所以不如隔離開。

因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie資料，
這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。

同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，
提高了webserver的http請求的解析速度。
複製程式碼

4.5 link和@import

（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;

（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

4.6 style標籤寫在body後與body前有什麼區別？

提示對於js阻塞，網上已經有很多文章，但是css阻塞的描述較少，於是對css阻塞進行深入研究。
寫了一個測試demo，程式碼如下

late-css.php
<?php
header("Content-type: text/css; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = `div{background:blue}`;
echo $str;
?>
 
late-js.php
<?php
header("Content-type: text/js; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = `document.write("I`m the lazy note")`;
echo $str;
?>
複製程式碼
index3.html
<html>
<head>
    <style>
         div{background:red;width:200px;height:200px;}
    </style>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</head>
<body>
    <div></div>
</body>
</html>
複製程式碼

執行demo呈現的是頁面需要等待10秒才能開啟，而且直接開啟的是藍色方塊。（證明css在頁面中存在阻塞,但不確定是在解析DOM時阻塞還是渲染時阻塞）

index4.html
<html>
<head>
    <style>
         div{background:red;width:200px;height:200px;}
    </style>
</head>
<body>
    <div></div>
</body>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</html>
複製程式碼

執行demo呈現的是頁面需要等待10秒才能開啟，而且直接開啟的是藍色方塊。（證明css在頁面中存在的是阻塞渲染）
 那麼在我們設計頁面的時候css，儘量將首屏顯示的css直接放在html上面是最合適的，但是實際情況很難做到，比如一些導航的樣式，未來在css檔案中實現CDN，不得不將css放在外鏈中。

index.html
<html>
    <head>
        <style>
            div{background:red;width:200px;height:200px;}
        </style>
        <link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
    </head>
    <body>
        <div><script src="/lab/late/late-js.php?time=10"></script></div>
    </body>
    <style>
        div{background:yellow;}
    </style>
</html>
複製程式碼

（證明js，阻塞DOM解析，CSS作用於DOM解析到哪裡，就渲染到哪裡）
猜猜這是會顯示什麼？ 
先白色5秒，再藍色5秒，再黃色

index2.html
<html>
    <head>
        <style>
            div{background:red;width:200px;height:200px;}
        </style>
    </head>
    <body>
    <div><script src="/lab/late/late-js.php?time=10"></script></div>
    </body>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
    <style>
        div{background:yellow;}
    </style>
</html>
複製程式碼

（證明css在下載時，不阻塞DOM解析，但是下載時阻塞渲染）
先紅色，再黃色

**總結：**CSS和JS的下載都不會被解析阻塞，CSS下載時會阻塞渲染, 外部樣式會阻塞後續指令碼執行，直到外部樣式載入並解析完畢。

  1. 沒遇到JS阻塞的情況，CSS只會在DOM解析完後渲染。
  2. 遇到JS阻塞的情況，當DOM一旦遇到JS阻塞時，就會觸發CSS渲染

那麼現在有一個問題，css寫在body前和body後有什麼區別，
由上述可見，CSS無論是用STYLE標籤還是link外鏈，

  • 如果沒有遇到jS阻塞，放哪裡都一樣，
  • 如果遇到js阻塞，把CSS寫在BODY上面，不會出現二次渲染，把CSS寫在BODY下面，JS阻塞時，會出現一次渲染，等阻塞完畢會出現二次渲染（除非外鏈的CSS下載時間比阻塞時間長）。

線上電子書閱讀前端常見面試題彙總

轉載請註明

極客教程-極客教程

相關文章