css面試題

目錄

面試題

1、哪些是塊級元素那些是行内元素，各有什麼特點 ？

2、CSS 中選擇器的優先級以及 CSS 權重如何計算？

3、CSS 選擇器有哪些?哪些屬性可以繼承?

4、HTML5 的離線存儲怎麼使用，工作原理是什麼？

5、說說你對語義化的了解？列舉 5 個語義化的标簽？

面試題

面試題一：

1、哪些是塊級元素那些是行内元素，各有什麼特點 ？

問題解答：

行内元素: a、span、b、img、strong、input、select、lable、em、button、textarea 、 selecting

塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form

行内、塊狀元素差別：

1、塊級元素會獨占一行，其寬度自動填滿其父元素寬度行内元素不會獨占一行，相鄰的 行 内元素會排列在同一行裡，知道一行排不下，才會換行，其寬度随元素的内容而變化

2、 一般情況下，塊級元素可以設定 width,height 屬性，行内元素設定 width, height 無 效 (注意：塊級元素即使設定了寬度，仍然是獨占一行的)

3、塊級元素可以設定 margin 和 padding. 行内元素的水準方向的 padding-left,padding-right,margin-left,margin-right 都産生邊距效果，但是豎直 方 向的 padding-top,padding-bottom,margin-top,margin-bottom 都不會産生邊 距效 果。（水準方向有效，豎直方向無效）

面試題二：

2、CSS 中選擇器的優先級以及 CSS 權重如何計算？

問題解答：

！Important>行内樣式>ID 選擇器>類選擇器>标簽>通配符>繼承>浏覽器預設屬性

權重

CSS 權重是由四個數值決定，看一張圖比較好解釋：

圖裡是英文的，翻譯過來分别介紹一下，4 個等級的定義如下：

第一等：内聯樣式，如：style="color:red;"，權值為 1000.（該方法會造成 css 難以管理， 是以不推薦使用）

第二等：ID 選擇器，如：#header，權值為 0100

第三等：類、僞類、屬性選擇器如：.bar， 權值為 0010

第四等：标簽、僞元素選擇器，如：div ::first-line 權值為 0001 最後把這些值加起來，再就是目前元素的權重了

其他：

無條件優先的屬性隻需要在屬性後面使用!important。它會覆寫頁面内任何位置定義的元素樣 式。（ie6 支援上有些 bug） 通配符，子選擇器，相鄰選擇器等。如*，>,+, 權值為 0000. 繼承的樣式沒有權值

CSS 權重計算方式

計算選擇符中的 ID 選擇器的數量（=a） 計算選擇符中類、屬性和僞類選擇器的數量（=b） 計算選擇符中标簽和僞元素選擇器的數量（=c） 忽略全局選擇器 在分别計算 a、b、c 的值後，按順序連接配接 abc 三個數字組成一個新的數字，改值即為所計算的 選擇符的權重。如果兩個選擇符的計算權重值相同，則采取“就近原則”。

面試題三：

3、CSS 選擇器有哪些?哪些屬性可以繼承?

問題解答：

CSS 選擇器：

1、id 選擇器（ # myid）

2、類選擇器（.myclassname）

3、标簽選擇器（div, h1, p）

4、相鄰選擇器（h1 + p）

5、子選擇器（ul > li）

6、後代選擇器（li a）

7、通配符選擇器（ * ）

8、屬性選擇器（a[rel = "external"]）

9、僞類選擇器（a:hover, li:nth-child）

繼承問題：

可繼承的樣式： font-size font-family color, UL LI DL DD DT;

不可繼承的樣式：border padding margin width height ;

面試題四：

4、HTML5 的離線存儲怎麼使用，工作原理是什麼？

問題解答：

在使用者沒有與網際網路連接配接時，可以正常通路站點或應用，在使用者與網際網路連接配接時，更新用 戶機器上的緩存檔案

原理：HTML5 的離線存儲是基于一個建立的.appcache 檔案的緩存機制(不是存儲技術)， 通過這個檔案上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲了下來。之 後當網絡在處于離線狀态下時，浏覽器會通過被離線存儲的資料進行頁面展示

如何使用：

1、頁面頭部像下面一樣加入一個 manifest 的屬性；

2、在 cache.manifest 檔案的編寫離線存儲的資源；

3、在離線狀态時，操作 window.applicationCache 進行需求實作

面試題五：

5、說說你對語義化的了解？列舉 5 個語義化的标簽？

問題解答：

1、去掉或樣式丢失的時候能讓頁面呈現清晰的結構：HTML 本身是沒有表現的，我們看到 例如

<h1>是粗體，字型大小 2em，加粗；<strong>是加粗的，不要認為這是 HTML 的表現，這些其實 HTML 預設的 CSS 樣式在起作用，是以去掉或樣式丢失的時候能讓 頁面呈現清晰的結構不是語義化的 HTML 結構的優點，但是浏覽器都有有預設樣式， 預設樣式的目的也是為了更好的表達 HTML 的語義，可以說浏覽器的預設樣式和語義化的 HTML 結構是不可分割的

2、螢幕閱讀器（如果訪客有視障）會完全根據你的标記來“讀”你的網頁

3、PDA、手機等裝置可能無法像普通電腦的浏覽器一樣來渲染網頁（通常是因為這些裝置 對 CSS 的支援較弱）

4、有利于 SEO：和搜尋引擎建立良好溝通，有助于爬蟲抓取更多的有效資訊：爬蟲依賴 于 标簽來确定上下文和各個關鍵字的權重

5、便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循 W3C 标 準的團隊都遵循這個标準，可以減少差異化

常見的語義化标簽

<header>元素描述了文檔的頭部區域标簽定義導航連結的部分 
<section> 标簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分 
<article> 标簽定義獨立的内容 
<aside> 标簽定義頁面主區域内容之外的内容（比如側邊欄） 
<footer> 元素描述了文檔的底部區域