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

時間  2019-11-16
標籤 前端 工程師 面試 html+css html css 欄目 快樂工作 简体版
原文   原文鏈接

image.png

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

1. HTML5相關

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

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。php

新特性(包括標籤):css

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

移除的元素：html

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

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

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

固然也能夠直接使用成熟的框架、好比html5shim;html5

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

1.3 區分 HTML 和 HTML5

DOCTYPE聲明\新增的結構元素\功能元素java

1.4 HTML語義化的理解

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

1.5 HTML5離線儲存

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。web

**原理：**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）
  陰影和反射        （Shadow\Reflect）
  文字特效      （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和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
          background-color:#f1ee18;/*全部識別*/
          .background-color:#00deff\9; /*IE六、七、8識別*/
          +background-color:#a200ff;/*IE六、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, \5b8b\4f53; }
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;屬性來清除元素的浮動可解決二、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下載時間比阻塞時間長）。

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

轉載請註明

極客教程-極客教程

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程