本文收集整理了12道關(guān)于CSS的面試題，大家一起來(lái)看看吧。
1.在 css 選擇器當(dāng)中，優(yōu)先級(jí)排序正確的是（）
A、id選擇器>標(biāo)簽選擇器>類選擇器
B、標(biāo)簽選擇器>類選擇器>id選擇器
C、類選擇器>標(biāo)簽選擇器>id選擇器
D、id選擇器>類選擇器>標(biāo)簽選擇器
4個(gè)等級(jí)的定義如下：
第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000
第二等：代表ID選擇器，如：#content，權(quán)值為100
第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為10
第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為1
2.下列定義的 css 中，哪個(gè)權(quán)重是最低的？（ ）
A、#game .name
B、#game .name span
C、#game div
D、#game div.name
權(quán)重越大，優(yōu)先級(jí)越高
CSS選擇器優(yōu)先級(jí)是指基礎(chǔ)選擇器的優(yōu)先級(jí)：
ID` > `CLASS` > `ELEMENT` > `*3、關(guān)于HTML語(yǔ)義化，以下哪個(gè)說(shuō)法是正確的？（ ）
A、語(yǔ)義化的HTML有利于機(jī)器的閱讀，如PDA手持設(shè)備、搜索引擎爬蟲(chóng)；但不利于人的閱讀
B、Table 屬于過(guò)時(shí)的標(biāo)簽，遇到數(shù)據(jù)列表時(shí)，需盡量使用 div 來(lái)模擬表格
C、語(yǔ)義化是HTML5帶來(lái)的新概念，此前版本的HTML無(wú)法做到語(yǔ)義化
D、header、article、address都屬于語(yǔ)義化明確的標(biāo)簽
解析：
選D
1、什么是HTML語(yǔ)義化？
根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器很好地解析。
2、為什么要語(yǔ)義化？
為了在沒(méi)有CSS的情況下，頁(yè)面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)
用戶體驗(yàn)：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；
有利于SEO ：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：
爬蟲(chóng)依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)；
便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉颍裱?code>W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化
4、CSS 樣式，下面哪一個(gè)元素能夠達(dá)到最大寬度，且前后各有一個(gè)換行？（ ）
A、Block Element
B、Square Element
C、Side Element
D、Box Element
解析：
選A
塊級(jí)元素block element
行內(nèi)元素 inline element
行內(nèi)塊元素inline-block element
5、放在HTML里的哪一部分JavaScripts會(huì)在頁(yè)面加載的時(shí)候被執(zhí)行？（ ）
A、文件頭部位置
B、文件尾
C、<head>標(biāo)簽部分
D、<body>標(biāo)簽部分
解析：
選D
head部分中的JavaScripts會(huì)在被調(diào)用的時(shí)候才執(zhí)行。
body部分中的JavaScripts會(huì)在頁(yè)面加載的時(shí)候被執(zhí)行。
6、下列說(shuō)法正確的有：（ ）
A、visibility:hidden;所占據(jù)的空間位置仍然存在，僅為視覺(jué)上的完全透明；
B、display:none;不為被隱藏的對(duì)象保留其物理空間；
C、visibility:hidden;與display:none;兩者沒(méi)有本質(zhì)上的區(qū)別；
D、visibility:hidden;產(chǎn)生reflow和repaint（回流與重繪）；
選A、B
visiblity:看不見(jiàn)，摸的著.
display:看不見(jiàn)，摸不著.
display是dom級(jí)別的，可以渲染和重繪。
visiblity不是dom級(jí)別的，不能重繪，只能渲染
7、新窗口打開(kāi)網(wǎng)頁(yè)，用到以下哪個(gè)值（ ）
A、_self
B、_blank
C、_top
D、_parent
解析：
選B
在html中通過(guò)<a>標(biāo)簽打開(kāi)一個(gè)鏈接，通過(guò) <a> 標(biāo)簽的 target
屬性規(guī)定在何處打開(kāi)鏈接文檔。
如果在標(biāo)簽<a>中寫(xiě)入target屬性，則瀏覽器會(huì)根據(jù)target的屬性值去打開(kāi)與其命名或名稱相符的 框架<frame>或者窗口.
在target中還存在四個(gè)保留的屬性值如下，
_black：在新窗口中打開(kāi)被鏈接文檔
_self：默認(rèn)。在相同的框架中打開(kāi)被鏈接文檔
_ parent：在父框架中打開(kāi)被鏈接文檔
_top：在整個(gè)窗口中打開(kāi)被鏈接文檔
framename：在指定框架中打開(kāi)被鏈接文檔
8、下列說(shuō)法錯(cuò)誤的是( )
A、設(shè)置display:none后的元素只會(huì)導(dǎo)致瀏覽器的重排而不會(huì)重繪
B、設(shè)置visibility:hidde后的元素只會(huì)導(dǎo)致瀏覽器重繪而不會(huì)重排
C、設(shè)置元素opacity:0之后，也可以觸發(fā)點(diǎn)擊事件
D、visibility:hidden的元素?zé)o法觸發(fā)其點(diǎn)擊事件
解析：
選A
設(shè)置display:none后的元素會(huì)導(dǎo)致瀏覽器的重排重繪
9、超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有hover和active了，解決方法是改變CSS屬性的排列順序？（ ）
A、a:link {} a:visited {} a:hover {} a:active {}
B、a:visited {} a:link {} a:hover {} a:active {}
C、a:active {} a:link {} a:hover {} a:visited {}
D、a:link {} a:active {} a:hover {} a:visited {}
解析：
選A
a:link`; `a:visited`; `a:hover`; `a:active;
a:hover必須放在a:link和a:visited之后；
a:active必須放在a:hover之后。
10、關(guān)于position定位，下列說(shuō)法錯(cuò)誤的是（ ）
A、fixed元素，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)，它始終是以 body 為依據(jù)
B、relative元素以它原來(lái)的位置為基準(zhǔn)偏移，在其移動(dòng)后，原來(lái)的位置不再占據(jù)空間
C、absolute 的元素，如果它的 父容器設(shè)置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會(huì)依據(jù)父容器進(jìn)行偏移
D、fixed 屬性的元素在標(biāo)準(zhǔn)流中不占位置
解析：
選B
absolute：生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位，元素的位置通過(guò)left、top、right、以及bottom屬性進(jìn)行規(guī)定fixed：
生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位，元素的位置通過(guò)left、top、right以及bottom屬性進(jìn)行規(guī)定relative：
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位，因此，left：20會(huì)向元素的LEFT位置添加20像素static：
默認(rèn)值，沒(méi)有定位，元素出現(xiàn)正常的流中（忽略top，bottom，left，right或者z-index聲明）inherit：
規(guī)定應(yīng)該從父元素繼承position屬性的值
11、css中哪些屬性可以繼承（ ）
A、font-size
B、color
C、font-family
D、border
解析：
選A、B、C
margin padding border display 不可以繼承
12、css中clear的作用是什么？（ ）
A、清除該元素所有樣式
B、清除該元素父元素的所有樣式
C、指明該元素周圍不可出現(xiàn)浮動(dòng)元素
D、指明該元素的父元素周圍不可出現(xiàn)浮動(dòng)元素
解析：
選C
clear` : `none` | `left` | `right` | `both（推薦教程：CSS教程）
對(duì)于CSS的清除浮動(dòng)(clear)， 這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素
文章來(lái)源：公眾號(hào)--前端人 作者：鬼哥
以上就是W3Cschool編程獅關(guān)于12題精選的CSS面試題（含解析）的相關(guān)介紹了，希望對(duì)大家有所幫助。
