DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 有關於CSS的面試題和練習
有關於CSS的面試題和練習
編輯:CSS詳解     

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

練習要做

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

創建這個按鈕

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

僅使用CSS屬性,創建這樣的一個按鈕

有關於CSS的面試題和練習

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

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

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

修復側邊欄

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

有關於CSS的面試題和練習

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

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

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

使固定寬度設計為流體

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

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

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

使用圖像替換Logo

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

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

如何使用Google找出backface-visibility默認值是什麼

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

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

要問的問題

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

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

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

  • width和height(或缺乏,默認值和裡面的內容)
  • padding
  • border

有關於CSS的面試題和練習

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;">

有關於CSS的面試題和練習

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

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

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

有關於CSS的面試題和練習

問他們如何讓Sprites就搞定,他們其實非常熟悉他們。手動創建Sprites當然是一種可能性,但它並不是非常高效的。有一些工具可以提高效率,例如:SpriteCowSpriteMeSpriting 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浏覽器下跨域的問題,可以加分。

解釋下這個CSS選擇器什麼發生什麼?

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

定義了role屬性,並且值為navigation的任何元素,其子元素列表下的除郵箱鏈接之外的所有鏈接元素。

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

你的想法

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved