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

來源:互聯網
上載者:User

文章簡介:如果你處在一個需要面試別人有關於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的一個有趣的題目。

inlineinline-blockblock區別是什嗎?

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

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

他們應該有自己的想法。或許是基於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



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。