12道優秀的CSS面試題【附答案】

2021-02-19 前端UpUp
正文共:3002字 2圖

預計閱讀時間:8分鐘


來源:網絡匯總

1.在 css 選擇器當中,優先級排序正確的是()

A、id選擇器>標籤選擇器>類選擇器

B、標籤選擇器>類選擇器>id選擇器

C、類選擇器>標籤選擇器>id選擇器

D、id選擇器>類選擇器>標籤選擇器

4個等級的定義如下:

第一等:代表內聯樣式,如: 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

權重越大,優先級越高

CSS選擇器優先級是指基礎選擇器的優先級:

ID > CLASS > ELEMENT > *

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

A、語義化的HTML有利於機器的閱讀,如PDA手持設備、搜尋引擎爬蟲;但不利於人的閱讀

B、Table 屬於過時的標籤,遇到數據列表時,需儘量使用 div 來模擬表格

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

D、header、article、address都屬於語義化明確的標籤

解析:

選D

1、什麼是HTML語義化?

根據內容的結構化(內容語義化),選擇合適的標籤(代碼語義化)便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

2、為什麼要語義化?

為了在沒有CSS的情況下,頁面也能呈現出很好地內容結構、代碼結構

用戶體驗:例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用;

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

爬蟲依賴於標籤來確定上下文和各個關鍵字的權重;方便其他設備解析(如屏幕閱讀器、盲人閱讀器、行動裝置)以意義的方式來渲染網頁;

便於團隊開發和維護,語義化更具可讀性,是下一步吧網頁的重要動向,遵循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會在頁面加載的時候被執行?( )

A、文件頭部位置

B、文件尾

C、<head>標籤部分

D、<body>標籤部分

解析:

選D

head部分中的JavaScripts會在被調用的時候才執行。

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

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

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

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

C、visibility:hidden;與display:none;兩者沒有本質上的區別;

D、visibility:hidden;產生reflow和repaint(回流與重繪);

選A、B

visiblity:看不見,摸的著.

display:看不見,摸不著.

display是dom級別的,可以渲染和重繪。

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

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

A、_self

B、_blank

C、_top

D、_parent

解析:

選B

在html中通過<a>標籤打開一個連結,通過 <a> 標籤的 target

屬性規定在何處打開連結文檔。

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

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

_black:在新窗口中打開被連結文檔

_self:默認。在相同的框架中打開被連結文檔

_ parent:在父框架中打開被連結文檔

_top:在整個窗口中打開被連結文檔

framename:在指定框架中打開被連結文檔

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

A、設置display:none後的元素只會導致瀏覽器的重排而不會重繪

B、設置visibility:hidde後的元素只會導致瀏覽器重繪而不會重排

C、設置元素opacity:0之後,也可以觸發點擊事件

D、visibility:hidden的元素無法觸發其點擊事件

解析:

選A

設置display:none後的元素會導致瀏覽器的重排重繪

9、超連結訪問過後hover樣式就不出現了,被點擊訪問過的超連結樣式不再具有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 為依據

B、relative元素以它原來的位置為基準偏移,在其移動後,原來的位置不再佔據空間

C、absolute 的元素,如果它的 父容器設置了 position 屬性,並且 position 的屬性值為 absolute 或者 relative,那麼就會依據父容器進行偏移

D、fixed 屬性的元素在標準流中不佔位置

解析:

選B

absolute:生成絕對定位的元素,相對於static定位以外的第一個父元素進行定位,元素的位置通過left、top、right、以及bottom屬性進行規定fixed:

生成絕對定位的元素,相對於瀏覽器窗口進行定位,元素的位置通過left、top、right以及bottom屬性進行規定relative:

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

默認值,沒有定位,元素出現正常的流中(忽略top,bottom,left,right或者z-index聲明)inherit:

規定應該從父元素繼承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、指明該元素周圍不可出現浮動元素

D、指明該元素的父元素周圍不可出現浮動元素

解析:

選C

clear : none | left | right | both

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

優秀

關注公眾號「前端UpUp」,聯繫作者👉 「DayDay2021」 ,期待與你聊天嘮嗑。

相關焦點

  • 【面試題】CSS知識點整理(附答案)
    答案來源於 CSS選擇器從右向左的匹配規則[4]5. flex: 1 完整寫法Flex 布局概念:採用 Flex 布局的元素,稱為 Flex 容器(flex container),簡稱"容器"。加入了局部作用域和模塊依賴實現原理CSS的規則是全局的,任何一個組件的樣式規則,對整個頁面有效;產生局部作用域的唯一方法,就是使用一個獨一無二的class名字,不會與其他選擇器重名,這就是CSS Modules的實現原理:將每個類名編譯成獨一無二的哈希值;CSS Modules 用法教程[19]12. css 預處理器
  • 34道常見的HTML+CSS面試題,附答案
    源 /  web前端開發接上《33道前端開發理論面試題,附答案
  • 34道常見的HTML+CSS面試題(附答案)
    今天把HTML與CSS的面試題分享給大家,裡面有參考答案。
  • 【前端面試題】02—59道CSS面試題(附答案)
    CSS部分的面試題主要考察應試者對CSS基礎概念模型的理解,例如文檔流、盒模型、浮動、定位、選擇器權重、樣式繼承等。
  • 50道CSS基礎面試題(附答案)
    Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。超連結訪問過後hover樣式就不出現了,被點擊訪問過的超連結樣式不再具有hover和active了。
  • 45道CSS基礎面試題(附答案)
    ➤Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。➤超連結訪問過後hover樣式就不出現了,被點擊訪問過的超連結樣式不再具有hover和active了。
  • 50 道 CSS 基礎面試題及答案
    6、Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust:none; 解決。7、超連結訪問過後hover樣式就不出現了,被點擊訪問過的超連結樣式不再具有hover和active了。
  • 常見的HTML+CSS面試題(附答案)
    不夠語義12. 簡述一下src與href的區別src用於替換當前元素;href用於在當前文檔和引用資源之間確立聯繫。當使用 Javascript 控制 DOM 去改變樣式的時候,只能使用 link 方式,因為 @import 眼裡只有 CSS ,不是 DOM 可以控制12. position的absolute與fixed共同點與不同點相同:a.
  • 前端面試題(理論知識+HTML+CSS+JavaScript)襲來,請接招!【附答案】
    之前我也收集整理分享了一些前端面試題目的文章,有的附了答案,有的沒有附答案;雖然我們不是為了做題而做題目,也不是只為了在面試中過關,我們做題目的
  • Google人工智慧面試·真·題(附參考答案+攻略)
    Google的技術面試流程就是各家的標配而已,先遠程後現場。參考答案傳送門:https://www.zhihu.com/question/54626685/answer/14061005612、每年應聘Google的人有多少?答:兩百萬。大多數人可能都只是順便投一下,看看會不會中獎。
  • 104道 CSS 面試題,助你查漏補缺(上)
    [阿里航旅的面試題][38]39.簡單說一下 css3 的 all 屬性。[39]40.為什麼不建議使用統配符初始化 css 樣式。[40]41.absolute 的 containingblock(包含塊)計算方式跟正常流有什麼不同?[41]43.元素豎向的百分比設定是相對於容器的高度嗎?[43]44.全屏滾動的原理是什麼?用到了 CSS 的哪些屬性?
  • 2020最新Web前端經典面試題試題及答案(持續更新)-開課吧
    Web前端面試題Web前端面試題:說說你對webpack的看法解析:webpack是一個模塊打包工具,可以使用webpack可以將代碼切割成不同的chunk,實現按需加載,降低了初始化時間支持sourceUrls和sourceMaps,易於調試具有強大的plugin接口,大多是內部插件,使用起來比較靈活webpack使用異步IO並具有多級緩存,在增亮編譯上更加快Web前端面試題
  • 【前端面試題】01—42道常見的HTML5面試題(附答案)
    但在面試中,HTML5部分的面試題主要考察應試者對HTML5API的掌握情況,這是HTML5的重點,也正是這些API推動了前端的發展。有些人認為HTML5隻是新增了一些語義化HTML標籤,或者HTML5隻是對HTML做了拓展,我們只須了解HTML相關知識的觀點是不正確的。今天我們將跟大家分享42道HTML5的相關面試題。
  • 【乾貨】各大網際網路公司前端筆試面試題–HTML,CSS篇
    很多面試題是我自己面試BAT親身經歷碰到的。整理分享出來希望更多的前端er共同進步吧,不僅適用於求職者,對於鞏固複習前端基礎更是大有裨益。而更多的題目是我一路以來收集的,也有往年的,答案不確保一定正確,如有錯誤或有更好的解法,還請斧正。前面幾題是會很基礎,越下越有深度。1.你做的頁面在哪些流覽器測試過?
  • jQuery經典面試題及答案精選
    本文整理了一些關於jQuery的經典面試題及答案,分享給正要面試Web開發崗位的同學。問題:jQuery的美元符號$有什麼作用?回答:從我自己的角度來講,可以有3種類型的選擇器,如下:1、基本選擇器:直接根據id、css類名、元素名返回匹配的dom元素。2、層次選擇器:也叫做路徑選擇器,可以根據路徑層次來選擇相應的DOM元素。3、過濾選擇器:在前面的基礎上過濾相關條件,得到匹配的dom元素。
  • 【練習題】20道CSS基礎測試題
    ()A、<style src="mystyle.css">B、<link rel="stylesheet" type="text/css" href="mystyle.css">C、<stylesheet>mystyle.css</stylesheet>
  • 自動化測試面試題(附答案)
    自動化測試面試題2:細節篇之語言:python基礎目的:驗證求職者自動化崗位的開發、腳本語言的基礎以及熟悉程度1、super 是幹嘛用的?在 Python2 和 Python3 使用,有什麼區別?為什麼要使用 super?請舉例說明。答:super 用於繼承父類的方法、屬性。
  • 104道 CSS 面試題,助你查漏補缺
    CSS 面試知識點總結最近在整理 CSS 的時候發現遇到了很多面試中常見的面試題,本部分主要原作者在 Github 等各大論壇收錄的 CSS 相關知識和一些相關面試題時所做的筆記,分享這份總結給大家,對大家對 CSS 的可以來一次全方位的檢漏和排查,感謝原作者 CavsZhouyou 的付出,原文連結放在文章最下方,如果出現錯誤,希望大家共同指出
  • 小學奧數拔高題100題,附答案,家長列印1份給孩子,看看能對幾道?
    小學奧數拔高題100題,附答案,家長列印1份給孩子,看看能對幾道?相信大家也都知道,奧數這部分知識作為我們小學數學的一個難點,也是一大重點,那麼,如何才能掌握好奧數這部分知識呢?最近呢,不少的家長都留言說,希望老師分享一些關於奧數知識這方面的題型,希望可以鍛鍊孩子的思維能力,為此,老師今天就特意為大家整理了一份關於我們小學奧數拔高題100題,附答案,家長不妨列印1份給孩子,看看能對幾道?文末有列印版資料方法好了,今天就分享到這裡了,喜歡就多多關注吧!
  • 【查缺補漏】css、Less、Sass定義變量,混合,嵌套,運算等(內含8道面試題)
    Sass語法:$fontSize: 12px;body{  font-size:$fontSize;}css輸出:body{    font-size:12px;}(2) 默認變量:Sass的默認變量僅需要在值後面加上!