前端面試筆記 - css

CSS 中類 (classes) 和 ID 的區別。

id惟一，class能夠多個

請問 "resetting" 和 "normalizing" CSS 之間的區別？你會如何選擇，爲何？

restting： 移除網頁的全部默認樣式
normalizing： 修復跨瀏覽器的一致性，解決不一樣瀏覽器的顯示問題。

請解釋浮動 (Floats) 及其工做原理。

float包括right,left,none;設置該屬性，這個元素會脫離文檔流直到遇到包裹他的容器或者其餘浮動元素

描述z-index和疊加上下文是如何造成的。

z-index會設置元素在Z軸的位置，按照從高到底堆疊

請描述 BFC(Block Formatting Context) 及其如何工做。

bfc是頁面渲染的一部分。一個bfc就是一個總體，全部子元素都會在bfc裏面渲染，而不會影響外面的元素。常見bfc爲，根元素，float，postion元素，或者設置了overflow的元素

列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景。

clear:both;
設置bfc
overflow: hidden;
height: auto;

請解釋 CSS sprites，以及你要如何在頁面或網站中實現它。

css sprites是一個把衆多小圖片打包成一個大圖以減小http請求。
background: url(...) x-axis y-axis;

你最喜歡的圖片替換方法是什麼，你如何選擇使用。

你會如何解決特定瀏覽器的樣式問題？

如何爲有功能限制的瀏覽器提供網頁？

你會使用哪些技術和處理方法？

有哪些的隱藏內容的方法 (若是同時還要保證屏幕閱讀器可用呢)？

你用過柵格系統 (grid system) 嗎？若是使用過，你最喜歡哪一種？

你用過媒體查詢，或針對移動端的佈局/CSS 嗎？

用過使用媒體查詢截圖特定分辨率的樣式問題
media screen (width:){

}

你熟悉 SVG 樣式的書寫嗎？

如何優化網頁的打印樣式？

在書寫高效 CSS 時會有哪些問題須要考慮？

優先使用類選擇器和ID選擇器
避免使用其餘選擇規則，如tag
避免使用後代選擇器

使用 CSS 預處理器的優缺點有哪些？

能夠方便的實現變量，運算，繼承等高級特性
須要編譯 不能直接使用

請描述你曾經使用過的 CSS 預處理器的優缺點。

scss

若是設計中使用了非標準的字體，你該如何去實現？

使用@font-face，和@import

請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？

從右到左讀取，先判斷子類，後判斷父類

請描述僞元素 (pseudo-elements) 及其用途。

在不影響原有html的狀況下，加入新的樣式

請解釋你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。

• margin border padding content
• box-sizing: border-box; width包括border padding
• box-sizing: content-box; width只包括內容

請解釋 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？

全部元素，不包括僞元素的合模型爲border-box

請羅列出你所知道的 display 屬性的所有值

flex inline inline-block block
flex最新的彈性佈局
inline 內聯元素
inline-block能夠設置寬高的內聯元素
block 塊元素，獨佔一行

請解釋 inline 和 inline-block 的區別？

inline設置寬高，padding margin top bottom都無效

請解釋 relative、fixed、absolute 和 static 元素的區別

relatvie相對自身
fixed相對屏幕
absolute相對祖先元素中第一個不爲static的位置
static 默認

CSS 中字母 'C' 的意思是疊層 (Cascading)。請問在肯定樣式的過程當中優先級是如何決定的 (請舉例)？如何有效使用此係統？

ID > class, psuedo-class > element, psudo-element

你在開發或生產環境中使用過哪些 CSS 框架？你以爲應該如何改善他們？

BOOTSTRAP

請問你有嘗試過 CSS Flexbox 或者 Grid 標準規格嗎？

FLEX
align-item: 交叉軸排布
justiy-content: 主軸排布
flex: 放大 縮小 自動;設置權重
flex-direction: 設置方向

爲何響應式設計 (responsive design) 和自適應設計 (adaptive design) 不一樣？

響應式 只有一種佈局，根據屏幕自動改變
自適應 pc，平板，手機都有各自的佈局

你有兼容 retina 屏幕的經歷嗎？若是有，在什麼地方使用了何種技術？

媒體查詢
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
...
}

請問爲什麼要使用 translate() 而非 absolute positioning，或反之的理由？爲何？