前端面試筆記 - css

loonggg 發布于2019-08-23 14:50 / 2469人閱讀

摘要：是頁面渲染的一部分。一個就是一個整體，所有子元素都會在里面渲染，而不會影響外面的元素。常見為，根元素，，元素，或者設置了的元素列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。是一個把眾多小圖片打包成一個大圖以減少請求。

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，或反之的理由？為什么？

云服務器 GPU云服務器前端面試前端工程師面試前端ddos 攻擊面試前端開發工程師面試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101232.html

基本方法筆記 - 收藏集 - 掘金

摘要：探討判斷橫豎屏的最佳實現前端掘金在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。探討判斷橫豎屏的最佳實現 - 前端 - 掘金在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。判斷橫豎屏的實現方法多種多樣，本文就此來探討下目前有哪些實現方法以及其中的優...

maochunguang 2019-08-20 17:44 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

Jonathan Shieber 2019-08-29 12:33 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

SHERlocked93 2019-08-22 11:04 評論0 收藏0
前端面試筆記 - 性能

摘要：頁面中元素的布局是相對的，因此一個元素的布局發生變化，會聯動地引發其他元素的布局發生變化。對于有位置重疊的元素的頁面，這個過程尤其重要，因為一旦圖層的合并順序出錯，將會導致元素顯示異常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...

JouyPub 2019-08-23 14:50 評論0 收藏0
前端面試筆記 - html

摘要：為了支持在網絡標準被廣泛采用前，就已經建好的網站，這么做是必要的。在接近標準模式下，只有少數的怪異行為被實現。和有什么區別擁有更加嚴格的標簽檢查元素必須被正確地嵌套。元素必須被關閉。標簽名必須用小寫字母。 doctype(文檔類型) 的作用是什么？ doctype聲明指出閱讀程序應該用什么規則集來解釋文檔中的標記瀏覽器標準模式 (standards mode) 、幾乎標準模式（alm...

LoftySoul 2019-08-23 14:50 評論0 收藏0