本文收集整理了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è)備、搜索引擎爬蟲;但不利于人的閱讀
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ǔ)義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(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
:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:
爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重;方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)以意義的方式來(lái)渲染網(wǎng)頁(yè);
便于團(tuán)隊(duì)開發(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、新窗口打開網(wǎng)頁(yè),用到以下哪個(gè)值( )
A、_self
B、_blank
C、_top
D、_parent
解析:
選B
在html
中通過(guò)<a>
標(biāo)簽打開一個(gè)鏈接,通過(guò) <a>
標(biāo)簽的 target
屬性規(guī)定在何處打開鏈接文檔。
如果在標(biāo)簽<a>
中寫入target
屬性,則瀏覽器會(huì)根據(jù)target
的屬性值去打開與其命名或名稱相符的 框架<frame>
或者窗口.
在target
中還存在四個(gè)保留的屬性值如下,
_black
:在新窗口中打開被鏈接文檔
_self
:默認(rèn)。在相同的框架中打開被鏈接文檔
_ parent
:在父框架中打開被鏈接文檔
_top
:在整個(gè)窗口中打開被鏈接文檔
framename
:在指定框架中打開被鏈接文檔
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ì)大家有所幫助。