App下載

12題精選的CSS面試題(含解析)

猿友 2020-08-25 14:42:26 瀏覽數(shù) (6057)
反饋

本文收集整理了12道關(guān)于CSS的面試題,大家一起來看看吧。

1.在 css 選擇器當(dāng)中,優(yōu)先級排序正確的是()

A、id選擇器>標(biāo)簽選擇器>類選擇器

B、標(biāo)簽選擇器>類選擇器>id選擇器

C、類選擇器>標(biāo)簽選擇器>id選擇器

D、id選擇器>類選擇器>標(biāo)簽選擇器

4個等級的定義如下:

第一等:代表內(nèi)聯(lián)樣式,如: style=””,權(quán)值為1000

第二等:代表ID選擇器,如:#content,權(quán)值為100

第三等:代表類,偽類和屬性選擇器,如.content,權(quán)值為10

第四等:代表類型選擇器和偽元素選擇器,如div p,權(quán)值為1

2.下列定義的 css 中,哪個權(quán)重是最低的?( )

A、#game .name

B、#game .name span

C、#game div

D、#game div.name

權(quán)重越大,優(yōu)先級越高

CSS選擇器優(yōu)先級是指基礎(chǔ)選擇器的優(yōu)先級:

ID` > `CLASS` > `ELEMENT` > `*

3、關(guān)于HTML語義化,以下哪個說法是正確的?( )

A、語義化的HTML有利于機器的閱讀,如PDA手持設(shè)備、搜索引擎爬蟲;但不利于人的閱讀

B、Table 屬于過時的標(biāo)簽,遇到數(shù)據(jù)列表時,需盡量使用 div 來模擬表格

C、語義化是HTML5帶來的新概念,此前版本的HTML無法做到語義化

D、header、article、address都屬于語義化明確的標(biāo)簽

解析:

選D

1、什么是HTML語義化?

根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合適的標(biāo)簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

2、為什么要語義化?

為了在沒有CSS的情況下,頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)

用戶體驗:例如titlealt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用;

有利于SEO :和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:

爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重;方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)以意義的方式來渲染網(wǎng)頁;

便于團隊開發(fā)和維護(hù),語義化更具可讀性,是下一步吧網(wǎng)頁的重要動向,遵循W3C標(biāo)準(zhǔn)的團隊都遵循這個標(biāo)準(zhǔn),可以減少差異化

4、CSS 樣式,下面哪一個元素能夠達(dá)到最大寬度,且前后各有一個換行?( )

A、Block Element

B、Square Element

C、Side Element

D、Box Element

解析:

選A

塊級元素block element

行內(nèi)元素 inline element

行內(nèi)塊元素inline-block element

5、放在HTML里的哪一部分JavaScripts會在頁面加載的時候被執(zhí)行?( )

A、文件頭部位置

B、文件尾

C、<head>標(biāo)簽部分

D、<body>標(biāo)簽部分

解析:

選D

head部分中的JavaScripts會在被調(diào)用的時候才執(zhí)行。

body部分中的JavaScripts會在頁面加載的時候被執(zhí)行。

6、下列說法正確的有:( )

A、visibility:hidden;所占據(jù)的空間位置仍然存在,僅為視覺上的完全透明;

B、display:none;不為被隱藏的對象保留其物理空間;

C、visibility:hidden;與display:none;兩者沒有本質(zhì)上的區(qū)別;

D、visibility:hidden;產(chǎn)生reflowrepaint(回流與重繪);

A、B

visiblity:看不見,摸的著.

display:看不見,摸不著.

displaydom級別的,可以渲染和重繪。

visiblity不是dom級別的,不能重繪,只能渲染

7、新窗口打開網(wǎng)頁,用到以下哪個值( )

A、_self

B、_blank

C、_top

D、_parent

解析:

B

html中通過<a>標(biāo)簽打開一個鏈接,通過 <a> 標(biāo)簽的 target

屬性規(guī)定在何處打開鏈接文檔。

如果在標(biāo)簽<a>中寫入target屬性,則瀏覽器會根據(jù)target的屬性值去打開與其命名或名稱相符的 框架<frame>或者窗口.

target中還存在四個保留的屬性值如下,

_black:在新窗口中打開被鏈接文檔

_self:默認(rèn)。在相同的框架中打開被鏈接文檔

_ parent:在父框架中打開被鏈接文檔

_top:在整個窗口中打開被鏈接文檔

framename:在指定框架中打開被鏈接文檔

8、下列說法錯誤的是( )

A、設(shè)置display:none后的元素只會導(dǎo)致瀏覽器的重排而不會重繪

B、設(shè)置visibility:hidde后的元素只會導(dǎo)致瀏覽器重繪而不會重排

C、設(shè)置元素opacity:0之后,也可以觸發(fā)點擊事件

D、visibility:hidden的元素?zé)o法觸發(fā)其點擊事件

解析:

A

設(shè)置display:none后的元素會導(dǎo)致瀏覽器的重排重繪

9、超鏈接訪問過后hover樣式就不出現(xiàn)了,被點擊訪問過的超鏈接樣式不再具有hoveractive了,解決方法是改變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:linka:visited之后;

a:active必須放在a:hover之后。

10、關(guān)于position定位,下列說法錯誤的是( )

A、fixed元素,可定位于相對于瀏覽器窗口的指定坐標(biāo),它始終是以 body 為依據(jù)

B、relative元素以它原來的位置為基準(zhǔn)偏移,在其移動后,原來的位置不再占據(jù)空間

C、absolute 的元素,如果它的 父容器設(shè)置了 position 屬性,并且 position 的屬性值為 absolute 或者 relative,那么就會依據(jù)父容器進(jìn)行偏移

D、fixed 屬性的元素在標(biāo)準(zhǔn)流中不占位置

解析:

B

absolute:生成絕對定位的元素,相對于static定位以外的第一個父元素進(jìn)行定位,元素的位置通過left、top、right、以及bottom屬性進(jìn)行規(guī)定fixed

生成絕對定位的元素,相對于瀏覽器窗口進(jìn)行定位,元素的位置通過lefttop、right以及bottom屬性進(jìn)行規(guī)定relative

生成相對定位的元素,相對于其正常位置進(jìn)行定位,因此,left:20會向元素的LEFT位置添加20像素static

默認(rèn)值,沒有定位,元素出現(xiàn)正常的流中(忽略top,bottom,leftright或者z-index聲明)inherit

規(guī)定應(yīng)該從父元素繼承position屬性的值

11、css中哪些屬性可以繼承( )

A、font-size

B、color

C、font-family

D、border

解析:

AB、C

margin padding border display 不可以繼承

12、cssclear的作用是什么?( )

A、清除該元素所有樣式

B、清除該元素父元素的所有樣式

C、指明該元素周圍不可出現(xiàn)浮動元素

D、指明該元素的父元素周圍不可出現(xiàn)浮動元素

解析:

C

clear` : `none` | `left` | `right` | `both

(推薦教程:CSS教程

對于CSS的清除浮動(clear), 這個規(guī)則只能影響使用清除的元素本身,不能影響其他元素

文章來源:公眾號--前端人 作者:鬼哥

以上就是W3Cschool編程獅關(guān)于12題精選的CSS面試題(含解析)的相關(guān)介紹了,希望對大家有所幫助。

CSS

0 人點贊