CSS網頁製作:CSS的面試題和練習

文章簡介：如果你處在一個需要面試別人有關於CSS方面技巧和知識，一時想起來還真有點難。我把我能想出來的整理在一起，提供給大家參考。

如果你處在一個需要面試別人有關於CSS方面技巧和知識，一時想起來還真有點難。我把我能想出來的整理在一起，提供給大家參考。

練習要做

正如他們說的，大家實際工作很重要。當然，大家通過工作練習更為重要。這些都是一些練習，並不特別困難，任何人或有沒有CSS經驗都應該做得到。只看或只聽，這樣做是沒有任何意義的。在CodePen中做練習就挺完美的。

 

CodePen如何使用？詳細使用可以點擊這裡。——大漠

 

建立這個按鈕

我在Mobify的CodePen帳號裡看到這樣的一個想法。給大家一張按鈕的圖片，並告訴大家：

 

僅使用CSS屬性，建立這樣的一個按鈕

 

這將是測試候選人的CSS3技能的一個強大的測試例子。這個按鈕具有很多樣式，我們一起來看看：

• 他們是如何處理多邊框的？在這裡，box-shadow可能是最好的辦法。
• 他們是使用text-transform:uppercase;將文本轉換成大寫嗎？這將是最好的。
• 他們是如何處理星星？虛擬元素將是一種很好的候選方法。他們是使用了"unicode"還是字型表徵圖？
• 他們有沒有使用text-shadow做微妙的處理？
• 他們是怎麼把按鈕的主要背景製作出來？使用linear-gradient技巧將會是一個好技巧，或者box-shadow。
• 他們是使用嵌套來實現的圓角嗎？

我希望我沒有破壞Mobify的招聘過程！但老實說，我認為這些東西是假裝不出來的。你可以做它，討論它，或者你可以不做任何事情。

修複側邊欄

右側邊欄現在被擠到內容的下面。給我一些不同的方法解決這個問題。

即使兩列分別是75%和25%的寬度，並且使用浮動方法，側邊欄依舊掉下去。原因是由於例實際寬度超過了100%——由於padding，它們加起來超過了。有許多方法來改正：

• 在適當的元素上使用box-sizing:border-box是最有效解決辦法。
• 使用calc()在元素的width屬性中減去padding值是另一種方法。
• 在元素內部增加一個額外的容器，並將padding放在這個新增的內部容器中，這是一種修複方法，而且得到眾多瀏覽器支援。
• 運用數學方式調整資料，這也是另一種方式。例如列減小寬度4%,那麼內距為2%。

還有其他的方法。他們能想到更多的解決方案，更有創造性。歡迎提供。

使固定寬度設計為流體

這有一個設計。它具有一個“800px”的固定寬度。你有更好的方法，讓他適合任何螢幕大小嗎？

這僅是一個響應式設計因素（他們應該至放熟悉），但還是很重要的。這能協助他在合理的空間選擇理性的布局。我有一些看法：

• 將寬度的像素值改成百分比值（他們是如何處理這些資料的轉換？）
• 他們在最大螢幕或小螢幕下做了什麼特別的事情呢？
• 他們有沒有試圖使用一個方案來解決一個響應式的映像？
• 新設計是否保留了階層的繼承的原重要性？
• 他們回到你的問題上嗎？（很多事情要問這裡，包括其他可能可用的資源。）
• 他們測試了嗎？（確保它真的有用，並找到想要的meta標籤。）

使用映像替換Logo

<ahref="/"class="logo">Company</a>

具有訪問性和語義化映像替換已經是一個很多年的CSS話題和“最佳方法”已經討論很多年。讓他們告訴你如何可以做到很多方法實現這種效果，以觀察他們真的會使用CSS。他不僅僅是知道怎麼做的一件事情，而是知道如何去用多種方式實現。

 

有關於映像替換文本更多方法，你要是感興趣，可以猛擊這裡。——大漠

 

如何使用Google找出backface-visibility預設值是什麼

能夠通過Google快速有效找到需要的東西是每個開發人員工作中很重要的一部分。他們是不是快速找到呢？他們有沒有找到正確的答案呢？他們有沒有在搜尋結果頁找到指定的資訊呢？

也許這個問題沒有使用Google搜尋，那可以看看使用了哪些搜尋引擎。這裡沒有特別的偏見，但如果它不是Google，你會期望他們使用什麼搜尋瀏覽器作為有效搜尋呢？

要問的問題

Darcy Clarke把這件事情推動有一些年了。我將更新一些，加上我自己的一些，再來闡述一下。

什麼是CSS的盒子模型？這裡有哪些CSS屬性？

CSS盒模型的基本原則是理解布局和大小等。它主要由下面部分組成：

• width和height（或缺乏，預設值和裡面的內容）
• padding
• border

margin對於盒模型來說是相關的但不嚴格。我將額外的提到這一點，但不包括。

Sass、LESS和Stylus是什嗎？大家為什麼要使用他們？如何使用Compass相關的Sass?

他們是CSS前置處理器。他是CSS上的一種抽象層。他們是一種特殊的文法/語言編譯成CSS。他們使用CSS更容易管理，諸如變數、混合，以及用來處理前端（在其他事物之中）。他們容易做到最佳，像串連和壓縮CSS。

瞭解他們的不同或使用他們的經驗可以加分。理多的加分是知道如何使用像Compass，Bourbon，LESSHat，Nib等，以及瞭解他們是如何聯絡的。

一些有問題的CSS引用的線上資源

善於搜尋問題使用具有一個寶貴的工作技能。這並沒有任何羞愧。感到羞愧的是因為“你應該知道這個”而還在不停的徘徊。如果你沒有時間去做這些事情，你只需要搜尋資源中的資訊，就可以告訴你。

Google可以找到一個非常好的答案（因為它的真實，我們都知道它）。但能夠說出一些特定的網站是一個很好的指向，他們已經做了一些收集並熟悉一些網，並且這些是他們最喜歡的。比如說MDN(Mozilla Developer Network)就是一個很好的答案。

描述一個"reset"的CSS檔案並如何使用它。知道normalize.css嗎？你瞭解他們的不同之處？

重設樣式非常多，凡是一個前端開發人員肯定有一個常用的重設CSS檔案並知道如何使用它們。他們是盲目的在做還是知道為什麼這麼做呢？原因是不同的瀏覽器對一些元素有不同的預設樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。

你可能會用Normalize來代替你的重設樣式檔案。它沒有重設所有的樣式風格，但僅提供了一套合理的預設樣式值。既能讓眾多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。

在這一方面，無法做每一個複位。它也確實有些超過一個重設，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。

清除浮動的各種技巧是什嗎？

Float是很普便的。眾所周知，可以使用他製作布局和網格系統，並且相容所有瀏覽器。大家都知道，浮動會讓元素塌陷。即被浮動元素的父元素不具有高度。例如一個父元素包含了浮動元素，它將塌陷具有零高度。你可以按下面的方法處理：

• 使用clearfix(知道Micro clearfix可以加分)
• 父元素浮動也是一種方法
• 父元素使用overflow屬性並設定visible值

建立一個BFC可以加分。可能要嵌套一些東西，如：<br style="clear: both;">。

作為獎勵的問題，你可以向他們問比較使用inline-block還是float建立一個網格。好的答案：無論哪種方式有問題。使用inline-block，你需要處理空白問題，使用float你需要清除浮動。

Sprites是什麼和為什麼要使用他們？你是如何建立他們？有可能替代Sprites的方法是什嗎？

Sprites本質是多張圖片拼成一張圖片。為了提高效能的原因，使用它們。一般來說，最慢一個網站可以做的是請求一個資源。一個網站的請求需要越少，速度越快。快就等於好。多個請求合成一個請求就是好。

問他們如何讓Sprites就搞定，他們其實非常熟悉他們。手動建立Sprites當然是一種可能性，但它並不是非常高效的。有一些工具可以提高效率，例如：SpriteCow、SpriteMe、Spriting with Compass或者Grunticon。聽到這些部是非常有趣的。

Sprites是柵格映像。當問到替代品時，好的答案可能都是與事實相關，Sprites通常為Icons和Icons不是需要光柵。SVG表徵圖，字型表徵圖，字元編碼等等。

 

如果您對字型表徵圖相關知識感興趣，可以點擊這裡閱讀。——大漠

 

CSS中可訪問是什嗎？

隱藏內容在這裡是一個重點。如果你們都試圖在視覺上和他的內容隱藏不見，這裡僅接受display:none;。

CSS控制顏色，因此顏色可訪問性相關。專註樣式用CSS直接控制也非常重要。

與HTML和JavaScript相關的，有更多的可訪問性的東西，所以提到那個東西是比較厲害的，但我認為這是集中考驗CSS的一個有趣的題目。

inline、inline-block和block區別是什嗎？

在不改變行內元素，能將他們的細節描述清楚可以加分。

你用什麼工具做跨瀏覽器測試？

他們應該有自己的想法。或許是基於Web的測試載入器，例如BrowserStack,或許是基於虛擬機器上測試，例如Virtual Box，或許是直接在不同的電腦上測試。

確保跨瀏覽器測試是前端設計工作中的一部分。你不喜歡他，但你也不能討厭他。就在這裡，這是工作。什麼樣的工作是你想的工作？。

你最喜歡的網頁設計工作遊戲工具是什嗎？

他們喜歡的代碼編輯器是什嗎？他們是從哪裡尋找靈感？他們在版本控制方面有什麼經驗？他們在哪檢驗自己工作的品質？支援嗎？他們在一起工作有什麼不同的部署方法嗎？他們知道Photoshop或其他視覺設計軟體嗎？如何選擇？有比較好的終端嗎？

這些只是其中的一些例子，有趣的是聽他們說使用任何軟體完成自己的工作。感到有自己使用的工作（和更好的工具，他們喜歡）是有趣的。如果有說到一些讓人興奮的工具，可以給他們加分。

說出一個網站在IE8上的渲染問題，你決定支援他，你是如何著手處理它的？

這將是另一個問題，要問天瀏覽器測試的問題，會更具體一些。也許一個更艱難的選擇問題是運行Android2.3的Google Nexus代替IE8。他們可以找到一個模擬器嗎？他們會尋找一個設計實驗室嗎？他們會向公司申請購買裝置進行測試的計劃嗎？會找到朋友幫忙進行測試嗎？

什麼是響應式設計？

它是關於網站的製作或網頁製作的工作。不同的裝置有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些裝置上讓網站運行正常。一部分是媒體查詢和不同的視覺效果。一部分是不同的資源（如不同的Javascript來處理觸摸與點擊自動適應螢幕的對比）。

 

如果你從未聽過響應式設計或者你對響應式設計有深厚的興趣，建議你點擊這裡閱讀更多關於響應式設計方面的教程。——大漠

 

你做過網格布局嗎？你有什麼想法嗎？

為什麼他們需要一個網格系統？他們是如何建立一個網格系統？是自己建立還是使用一個網格工具？他們喜歡網格工具嗎？他們喜歡用什麼樣的類名定義網格？他們是移動端先行還是案頭系統先行？網格是一個協助還是一個障礙呢？網格能自動運用到任何項目中嗎？

SVG的好處是什嗎？

SVG是一種基於向量的映像格式。這是一個有效格式（檔案小）。你可以對他們進行縮放和任何尺寸下保持清晰（提及到小尺寸下光柵佔優勢可以加分）。你可以使用CSS和JavaScript來修飾他們以及使用SVG指定的濾鏡做很多事情，比如說模糊效果。

你曾為一個網站建立過列印樣式嗎？

對於一個網站的列印樣式，他們是採取什麼方法？他們又是如何測試的？

你是負責編輯設計的，使用非標準的Web字型，你會怎麼做？

一個並非主要的方法@font-face，讓他們談論下它是如何工作的？談論一下他如何是使用CSS技術以及談論是如何服務，提供了體和讓它變得更容易等等。Google字型，Typekit，Font Deck，Cloud Typography等等。

如果知道@font-face或者Firefox瀏覽器下跨域的問題，可以加分。

 

有關於@font-face更多的中文教程，在W3cplus已有多篇教程，如果您對此非常感謝興趣，猛擊這裡。 ——大漠

 

解釋下這個CSS選取器什麼發生什嗎？

[role=navigation] > ula:not([href^=mailto]) {  }

定義了role屬性，並且值為navigation的任何元素，其子項目列表下的除郵箱連結之外的所有連結元素。

能夠用語言表達清楚這個選取器，證明你理解他們和可以使用他們做一些技術交流。

你的想法

當你面試一個有關於CSS方面的工作，你會部一些什麼樣的問題呢？或者你是如何問來面試的人？或者你認為最好的問題是什嗎？

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

英文原文：http://css-tricks.com/interview-questions-css/

中文譯文：http://www.w3cplus.com/css/interview-question-css.html