web前端工程師面試題更新了，找工做必背的面試題 一

一、用純CSS建立一個三角形的原理是什麼？

答案：首先，須要把元素的寬度、高度設爲0。而後設置邊框樣式。

width: 0;height: 0;

border-top: 40px solid transparent; border-left: 40px solid transparent;

border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;

二、爲何要初始化CSS樣式

答案：由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

三、CSS裏的visibility屬性有個collapse屬性值？在不一樣瀏覽器下之後什麼區別？

答案：當一個元素的visibility屬性被設置成collapse值後，對於通常的元素，它的表現跟hidden是同樣的。

chrome中，使用collapse值和使用hidden沒有區別。

firefox，opera和IE，使用collapse值和使用display：none沒有什麼區別。

四、在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

答案：使用偶數字體。偶數字號相對更容易和 web 設計的其餘部分構成比例關係。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 十二、1四、16 px 這三個大小的點陣，而 1三、1五、17 px時用的是小一號的點。（即每一個字佔的空間大了 1 px，但點陣沒變），因而略顯稀疏。

五、元素豎向的百分比設定是相對於容器的高度嗎？

答案：當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，可是，對於一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

六、html5哪些操做能夠SEO優化？

title標籤；meta標籤；header標籤；footer標籤

元標籤（meta標籤）；導航標籤（nav標籤）；文章標籤（article標籤）；左或右側標籤（aside標籤）

七、簡述對Web語義化的理解？

就是讓瀏覽器更好的讀懂你寫的代碼，在進行HTML結構、表現、行爲設計時，儘可能使用語義化的標籤，使程序代碼簡潔明瞭，易於進行web操做和網站SEO，方便團隊的一種標準，以圖實現一種「無障礙」的web開發。

八、box-sizing、transition、translate分別是什麼？

a. box-sizing:用來指定模型的大小的計算方式。主要分爲border-box(從邊框固定盒子大小)、content-box(從內容固定盒子大小)兩種計算方式。

b. transition:當前元素只要有"屬性"發生變化時，能夠平滑的進行過渡。經過transition-propety設置過渡屬性；transition-duration設置過渡時間；transition-timing-function設置過渡速度；transition-delay設置過渡延時。

c. translate：經過移動改變元素的位置；有x,y,z三個屬性

九、html中 document的做用是什麼？

HTML即：超文本標記語言，標準通用標記語言的一個應用，「超文本」就是指頁面內能夠包含圖片、連接、甚至音樂、程序等非文字元素。

HTML Document即：HTML Document對象，每一個載入瀏覽器的HTML文檔都會成爲Document對象

因爲Document對象是window對象的一部分，因此可經過window.document屬性對其進行訪問。

十、談談你對前端性能優化的理解

a. 請求數量：合併腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域

b. 請求帶寬：開啓GZip，精簡JavaScript，移除重複腳本，圖像優化，將icon作成字體

c. 緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減小DNS查找，配置ETag，使AjaX可緩存

d. 頁面結構：將樣式表放在頂部，將腳本放在底部，儘早刷新文檔的輸出

e. 代碼校驗：避免CSS表達式，避免重定向