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