CSS常考知識點

2020-12-03 前端術巔

本章介紹一下CSS的知識點,CSS的東西很多,下面這些是比較高頻的考點,希望對你有所幫助:

2.1 常用選擇器

面試官:請介紹一下常用的選擇器及其優先級吧(基礎題)

在CSS中,選擇器是一種模式,用於選擇需要添加樣式的元素。常用的選擇器按優先級從高往低分別是:

ID選擇器(優先級最高,一般用於定義容器骨架,很少用於樣式選擇)類選擇器(class selectors) (例如.example)、屬性選擇器(attributes selectors)(例如[type="radio"])、偽類(pseudo-classes)(例如:hover)類型選擇器(type selectors)(例如 h1)和 偽元素(pseudo-elements)(例如::before)通配選擇符(universal selector)()、*關係選擇符(combinators) (+, >, ~, ' ') 和 **否定偽類(negation pseudo-class)(:not()) 對優先級沒有影響(但是,在 :not()內部聲明的選擇器是會影響優先級)當然,除了以上這些。給元素添加的內聯樣式 (例如 style="font-weight:bold") 總會覆蓋外部樣式表的任何樣式 ,因此可看作是具有最高的優先級

面試官:複雜的項目裡往往會遇到樣式給覆蓋的問題,解決此類問題行之有效方法有哪些呢?(拓展題)

最簡單的方法是給這個樣式後面增加 !important,這樣該樣式的聲明將覆蓋任何其他聲明,但是使用 !important 是一個壞習慣,應該儘量避免,因為這破壞了樣式表中固有的級聯規則使得調試找bug變得更加困難了。當兩條相互衝突的帶有!important規則的聲明被應用到相同的元素上時,擁有更大優先級的聲明將會被採用,因此我推薦的方法有2個:

利用CSS級聯屬性,給該元素聲明一個優先級更高的選擇器,如:.example span {} 給span加個 .text的類: .example .text {}增加一個或多個其他元素,使選擇器變得更加具體,並獲得更高的優先級,如 .example .text {} 改成 .example > div > .text {}面試官:剛提到了!important的弊端,那我們什麼時候可以使用!important呢?(發散題)

這個題目是個發散題,一般人很難答得全,其實有兩種情況我們可以使用 !important:

一種情況是你的網站上有一個設定了全站樣式的CSS文件,同時你(或是你同事)寫了一些很差的內聯樣式。在這種情況下,你就可以在你全局的CSS文件中寫一些!important的樣式來覆蓋掉那些直接寫在元素上的行內樣式。第二種情況是已經給某個樣式加持了優先級非常高的選擇器,在無法改HTML結構的情況下,可以使用 !important來做覆蓋。2.2 布局常用單位

面試官:請列舉一下我們css布局常用的單位及區別(基礎題)

px:絕對單位,頁面按精確像素展示%:相對單位,根據父容器進行百分比計算em:相對單位,基準點為父節點字體的大小,如果自身定義了font-size按自身來計算(瀏覽器默認字體是16px),整個頁面內1em不是一個固定的值rem:相對單位,可理解為 root em, 相對根節點html的字體大小來計算,CSS3新加屬性,chrome/firefox/IE9+支持2.3 塊級和行內元素

面試官:請簡單介紹一下塊級元素和行內元素的區別,並分別舉例5個(基礎題)

塊級元素與行內元素有幾個關鍵區別:

- 格式:默認情況下,塊級元素會新起一行- 內容模型:一般塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素創建比行內元素更」大型「的結構常見的塊級元素如 div、header、footer、ul、p標籤等;常見的行內元素如 span、strong、input、label、i標籤等

2.4 常用定位方式

面試官:css裡定位方式有哪幾種,它們各有什麼用途呢?(基礎題)

CSS裡共有5種定位方式,它們分別是:

static(正常文檔流定位): 正常文檔流定位,此時 top, right, bottom, left 和 z-index 屬性無效,塊級元素從上往下縱向排布,行級元素從左向右排列relative(相對定位): 相對原文檔流布局進行偏移,設置了相對定位的元素可以脫離文檔流移動。往往我們要微調一些 內聯圖標的位置時會用到,或需要對該元素做z-index分層absolute(絕對定位): 相對於最近的非 static 定位祖先元素的偏移,來確定元素位置。彈層內一些固定在某處的元素 往往通過絕對定位來實現,比如關閉按鈕fixed(固定定位): 相對於屏幕視口(viewport)的位置來指定元素位置。元素的位置在屏幕滾動時不會改變,比如那種回到頂部的按鈕一般都是用此定位方式sticky(粘性定位):特性近似於relative和fixed的合體,經常用於實現垂直滾動 "吸頂" 效果面試官:元素設置了非static定位後可以用z-index做分層,說一下你對z-index的理解 (發散題)

CSS 中的z-index屬性控制重疊元素的垂直疊加順序,類似PS的圖層概念。默認元素的z-index為0,我們可以修改z-index來控制元素的圖層位置,而且z-index只能影響設置了position值的元素,我們可以設置z-index為負數去隱藏某個圖層

面試官:上面提到如果要微調一個行內元素的垂直位置,會使用relative布局,除此之外還有別的方法嗎?(基礎題)

這個問題很好回答,CSS3提供了transform屬性讓我們很方便對一個元素進行縮放、旋轉和平移,我們可以使用 translate(x, y)來對元素的位置進行微調。

面試官:相比較relative,為什麼現在更推薦使用translate來改變位置呢?

答案是改變transform或opacity不會觸發瀏覽器重新布局(reflow)或重繪(repaint),只會觸發複合(compositions)。而改變絕對定位會觸發重新布局,進而觸發重繪和複合。transform使瀏覽器為元素創建一個 GPU 圖層,但改變絕對定位會使用到 CPU。 因此translate()更高效,可以縮短平滑動畫的繪製時間。

2.5 常用布局方案

面試官:介紹一下你經常使用的一些布局方案吧(基礎題)

常用布局方案有 靜態布局浮動布局百分比流式布局inline-block水平布局flex彈性布局響應式布局rem布局等。現在最常用的是 flex彈性布局 和 rem布局。

面試官:實現垂直居中你一般有哪幾種方案?(基礎題)

最簡單的方法是用使用 flex布局:

<div> <div>內容</div></div>.container { display: flex; align-items: center; justify-content: center;}或者利用定位:

.container { position: relative;}.content { width: 100px; height: 100px; position: absolute; left: 0; right: 0; bottom: 0; top: 0;}或者採用BFC + transform:

.container { width: 500px; height: 500px; overflow: hidden; /*使容器成為一個BFC*/}.content { width: 100px; height: 100px; margin-top: 50%; transform: translateY(-50%);}2.6 層疊上下文(BFC)

面試官:正常流式布局下,我們如果給2個相鄰的塊級元素同時設置margin-top和margin-bottom為10px,他們實際會產生多少margin呢?(基礎題)

這個是日常做布局時經常會遇到的問題,答案當然是 10px,不過很多人是知其然卻不知其所以然,所以就算這個答對了,面試官往往也不會「罷休」

面試官:OK,回答正確。可以繼續講一下出現這個邊距摺疊的原因和如何避免這個問題嗎?(拓展題)

常規流布局時,盒子都是垂直排列,兩者之間的間距由各自的外邊距所決定,但不是二者外邊距之和。在CSS當中,相鄰的兩個盒子(可能是兄弟關係也可能是祖先關係)的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊,並且因而所結合成的外邊距稱為摺疊外邊距。摺疊的結果按照如下規則計算:

兩個相鄰的外邊距都是正數時,摺疊結果是它們兩者之間較大的值。兩個相鄰的外邊距都是負數時,摺疊結果是兩者絕對值的較大值。兩個外邊距一正一負時,摺疊結果是兩者的相加的和。至於如何避免這個問題,就需要引出 塊級格式化上下文(Block Formatting Context,BFC) 的概念,外邊距摺疊(Margin collapsing)只會發生在屬於同一BFC的塊級元素之間,因此我們只需把兩個塊級元素設置為單獨的BFC,就能解決這個問題,最簡單的方式是給兩個區塊設置 overflow: hidden;

面試官:OK,回答正確,不過除了解決外邊距塌陷, 你知道BFC還有其他的用途嗎?(發散題)

除了解決外邊距塌陷,應用BFC還能讓 浮動元素的容器也能被撐開:浮動元素是會脫離文檔流的(絕對定位元素會脫離文檔流)。如果一個沒有高度或者height是auto的容器的子元素是浮動元素,則該容器的高度是不會被撐開的。我們可以給容器加一個 overflow: hidden; 來解決這個問題:

.container { height: auto; border: 1px solid #ddd; overflow: hidden; /*使容器成為一個BFC*/}.child { float: right; width: 200px; height: 100px; background: #f0f0f0;}不過現在浮動不常用了,利用BFC還有其他2個常用的用途:

兩欄布局,防止文字環繞等防止元素塌陷拓展:BFC的觸發條件

塊格式化上下文(Block Formatting Context,BFC) 是Web頁面的可視化CSS渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素交互的區域。下面這些條件會觸發BFC:

根元素(<html>)浮動元素(元素的 float 不是 none)絕對定位元素(元素的 position 為absolute 或 fixed)行內塊元素(元素的 display 為 inline-block)表格單元格(元素的 display為 table-cell,HTML表格單元格默認為該值)表格標題(元素的 display 為 table-caption,HTML表格標題默認為該值)匿名表格單元格元素(元素的 display為table、table-row、 table-row-group、table-header-group、table-footer-group(分別是HTML table、row、tbody、thead、tfoot的默認屬性)或 inline-table)overflow 值不為 visible 的塊元素display 值為 flow-root 的元素contain 值為layout、content或 paint 的元素彈性元素(display為 flex 或 inline-flex元素的直接子元素)網格元素(display為 grid 或 inline-grid 元素的直接子元素)多列容器(元素的 column-count 或 column-width 不為 auto,包括 column-count 為 1)column-span 為 all 的元素始終會創建一個新的BFC,即使該元素沒有包裹在一個多列容器中。更多BFC的知識歡迎點擊這個 傳送門 進行查看

2.7 媒體查詢

面試官:請講一下你對媒體查詢的理解以及它的作用(基礎題)

媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表範圍的表達式組成,例如寬度、高度和顏色。媒體查詢,添加自CSS3,允許內容的呈現針對一個特定範圍的輸出設備而進行裁剪,而不必改變內容本身, 非常適合web網頁應對不同型號的設備而做出對應的響應適配(即響應式布局)

<!-- link元素中的CSS媒體查詢 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 樣式表中的CSS媒體查詢 --><style>@media (max-width: 600px) { .facet_sidebar { display: none; }}</style>2.8 盒模型

面試官:請簡單介紹一下你對盒模型的理解(基礎題)

當對一個文檔進行布局(layout)的時候,瀏覽器的渲染引擎會根據標準之一的 CSS 基礎框盒模型(CSS basic box model),將所有元素表示為一個個矩形的盒子(box)。CSS 決定這些盒子的大小、位置以及屬性(例如顏色、背景、邊框尺寸…)。盒模型由 content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)組成:

2.9 偽類和偽元素

面試官:請介紹一下什麼是偽類和偽元素,並介紹一下他們的區別(基礎題)

偽類(pseudo-class) 是一個以冒號(:)作為前綴,被添加到一個選擇器末尾的關鍵字,當你希望樣式在特定狀態下才被呈現到指定的元素時,你可以往元素的選擇器後面加上對應的偽類偽元素用於創建一些不在文檔樹中的元素,並為其添加樣式。比如說,我們可以通過::before來在一個元素前增加一些文本,並為這些文本添加樣式。雖然用戶可以看到這些文本,但是這些文本實際上不在文檔樹中他們的區別可以概括為:偽類是通過在元素選擇器上加入偽類改變元素狀態,而偽元素通過對元素的操作進行對元素的改變

2.10 動畫與過渡

面試官:CSS動畫和過渡有什麼區別嗎?(基礎題)

過渡 Transition:需要事件觸發,比如 hover,focus,checked , js修改等過渡效果是一次性的,無法循環只能定義開始和結束狀態,不能定義中間狀態控制粒度比較粗糙,動畫 Animation:不需要事件觸發顯示地隨著時間的流逝,周期性的改變元素的css屬性值。區別於一次性通過百分比來定義過程中的不同形態,可以很細膩 總得來說,transition更加粗一點,比如過渡的速度進行了封裝,可以控制是勻速改變還是貝塞爾曲線之類的。而animation提供的keyframe方法,可以手動去指定每個階段的屬性。此外animation還封裝了循環次數,動畫延遲等功能,配置自由且功能強大。

面試官:CSS3如何實現逐幀動畫嗎?(拓展題)

CSS3 可以使用 animation-timing-function 的階梯函數 steps(number_of_steps, direction) 來實現逐幀動畫的連續播放。並配合雪碧圖,通過更改 background-image 的值實現幀的切換。

本文由博客群發一文多發等運營工具平臺 OpenWrite發布

相關焦點

  • 2020中考化學常考知識點之數字表示意義
    中考網整理了關於2020中考化學常考知識點之數字表示意義,希望對同學們有所幫助,僅供參考。  3、離子符號前面的數字:表示離子個數   4、元素符號右上角的數字:表示該離子所帶的電荷數Mg2+   5、元素符號正上方的數字:表示該元素的化合價   6、化學式中元素符號右下角的數字:表示該分子所含有的某原子個數H2O   相關推薦:   2020年中考化學複習知識點匯總
  • 衡中班主任:高中英語100條常考知識點,建議收藏一份!
    衡中班主任:高中英語100條常考知識點,建議收藏一份!高中階段,很同學都為英語這門科目頭疼。高中英語難度提升很大,從基礎的單詞再到語法句式,積累起來都非常吃力。其實想要學好英語這門科目,首先就要掌握好單詞和短語,其次再去攻克難點。
  • 2020初中語文常考知識點:《朝花夕拾》
    中考網整理了關於2020初中語文常考知識點:《朝花夕拾》,希望對同學們有所幫助,僅供參考。   《朝花夕拾》原名《舊事重提》,是現代文學家魯迅的散文集,收錄魯迅於1926年創作的10篇回憶性散文。此文集作為「回憶的記事」,多側面地反映了作者魯迅青少年時期的生活,形象地反映了他的性格和志趣的形成經過。
  • 奧蘇貝爾常考知識點總結
    一、考情簡介奧蘇貝爾的知識點在教師招聘考試中,考查的頻率還是比較高的,常考查的是客觀題,多數以理解性的題目進行考查,有時候也會考查識記類的知識點。為了幫助廣大考生更好的備考,接下來將對奧蘇貝爾常考的知識點進行總結。
  • 2021中考現代文閱讀常考知識點:深層次含義理解類問題
    中考網整理了關於2021中考現代文閱讀常考知識點:深層次含義理解類問題,希望對同學們有所幫助,僅供參考。   1.分析本文標題的含義。   此類題首先需找出標題中的關鍵詞語,先回答它字面上的意思,即其本意。然後聯繫文章的主旨,說出這個詞語的寓意,便可得出其深層含義。   2.說說你對加點詞語含義的理解。
  • 前端面試常考問題之css盒模型
    總結:以上幾點,從上到下,知識點逐漸遞增,知識面從理論、CSS、JS,又回到CSS理論。二、接下來,我們把上面的六條,依次講解。獲取到的是運行完之後的寬高(三種css樣式都可以獲取)。
  • 英語老教師:高中英語100條常考知識點,掌握好,考試多拿20-30分
    英語老教師:高中英語100條常考知識點,掌握好,考試多拿20-30分相信很大部分同學一提到英語就頭疼,在高中階段,英語的難度提升不少,無論從單詞還是語法短語都難記難積累。所以,學習英語無論成績好壞,首先就要掌握好基礎單詞和語法,這是學習英語的基礎,基礎掌握好了,再去學習難點句型短語等等知識點。除了積累短語句型,還是要多去做題練習,練習多了,考試遇到相似的題型做起來就會輕鬆很多,所以老師給大家整理了高中英語100條必考知識點,掌握好這些知識點,英語成績提升20-30分。
  • 2021中考現代文閱讀常考知識點:鑑賞類問題
    中考網整理了關於2021中考現代文閱讀常考知識點:鑑賞類問題,希望對同學們有所幫助,僅供參考。   1.本文的標題有何作用?   標題通常有以下作用:(1) 全文的線索,推動情節的發展;(2)總結文章內容、點明主旨(突出主題);(3)形式新穎,吸引讀者;(4)反映人物情感的變化。
  • Python學習第233課——css中的長度單位
    我們還是回到css的知識,css是用來修飾網頁的,前面說到網頁中的元素一般需要我們給定寬高,這個寬度和高度就需要在css裡面去寫。無論是寬度還是高度,都屬於長度,既然是長度,就有長度單位,比如公裡、米、分米、釐米、毫米等。
  • 德宏教師教育心理學知識:奧蘇貝爾常考知識點總結
    一、考情簡介 奧蘇貝爾的知識點在教師招聘考試中,考查的頻率還是比較高的,常考查的是客觀題,多數以理解性的題目進行考查,有時候也會考查識記類的知識點。為了幫助廣大考生更好的備考,接下來將對奧蘇貝爾常考的知識點進行總結。
  • A-level物理常考知識點大揭秘
    在A-level物理的Using Electrcity中對於很多電學元件有一個比較具體的解析,在這裡A+國際教育白老師對於常考到的傳感器進行一個匯總,幫助同學們更快速的理解: 在考試當中我們最常見到的有以下2種: 1.
  • 心理學常考人物總結
    心理學常考人物總結在教師招聘考試中,心理學的人物觀點匹配題是常考題型,此知識點主要在客觀題中考查,本文將對相關知識進行總結分析。、福勒、布朗:教師成長三階段論30、波斯納:教師成長公式31、布魯巴奇:教師反思的四種方法32、羅傑斯:人本主義代表人物,學生中心教學模式(非指導模式)中公講師解析掃描二維碼·關注微信公眾號-中公教師考試回復「教育理論」即可查看教師考編兩學各章節練習題
  • 婦產科常考的116個知識點!
    婦產科常考的116個知識點! 1.性成熟期是卵巢生殖功能與內分泌功能最旺盛的時期。 2.孕酮在排卵後7~8日黃體成熟時分泌量達最高峰。
  • 2019軍轉幹公共基礎知識:常考的科學人物及其成就匯總
    軍轉幹公共基礎知識:本文為大家整理2019軍轉幹公共基礎知識:常考的科學人物及其成就匯總,北京軍轉幹考試網提供2019年北京軍轉幹考試公共基礎知識備考資料匯總等。 中公教育為大家帶來科技知識《常考的科學人物及其成就匯總》,希望可以幫助各位領導順利備考軍轉幹考試。
  • 2021考研數學衝刺:歷年常考考點
    基本就進入到衝刺階段了,本文中公考研小編整理的關於「」相關資訊文章,一起關注一下吧~1、兩個重要極限,未定式的極限、等價無窮小代換這些小的知識點在歷年的考察中都比較高而透過我們分析,假如考極限的話,主要考的是洛必達法則加等價無窮小代換,特別針對數三的同學,這兒可能出大題。2、處理連續性,可導性和可微性的關係要求掌握各種函數的求導方法。比如隱函數求導,參數方程求導等等這一類的,還有注意一元函數的應用問題,這也是歷年考試的一個重點。數三的同學這兒結合經濟類的一些試題進行考察。
  • 一個在線css三角形生成器
    接下來介紹的一款工具——css三角形生成器也是因為之前想要解放設計師的生產力, 自己又懶得切圖或者寫css代碼, 所以想來想去還是自己做一個能自動生成css三角形代碼的工具吧.在線css三角形生成器預覽由預覽動畫我們可以看到通過在線工具我們可以輕鬆配置各種想要的三角形, 並且能實時查看css代碼. 開發完這個工具之後筆者再也不用擔心還需要手寫三角形代碼了.
  • 《前端5分鐘》之使用純css實現網站換膚和焦點圖切換動畫
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫今天我們來繼續復盤一些工作中常用的css技巧和知識,以便我們可以更加優雅的用css實現富有動感的網站.
  • 高中語文:詩歌鑑賞6大專題資料,考試常考,高中生務必收藏一份
    高中語文:詩歌鑑賞6大專題資料,考試常考,高中生務必收藏一份語文是一門非常注重基礎的科目。在高中階段,很多同學都屬於及格容易,但高分很難,其實不是孩子學習能力不足,而是小初基礎沒有打好,上了高中,難度提升,知識點又比較繁雜,重點較多,孩子也是有心無力。之前做過高中階段語文丟分統計,丟分最嚴重的就是閱讀和詩歌填空了。閱讀不用多說,肯定要多去練習,那麼對於詩歌鑑賞填空這類知識點平時一定要去累積記憶。同學們丟分嚴重的問題就是因為抓不住詩歌的重點句式。
  • 10個驚人的復古CSS套件
    NES.cssNES-style(8bit-like)的CSS框架,非常適合您的復古瀏覽器遊戲。https://nostalgic-css.github.io/NES.css/RPG UIWeb中用於老式RPG GUI的輕量級純CSS框架;包括按鈕,複選框
  • 全網首發:英語常考1920個固定短語搭配,初中生抓緊列印一份!
    全網首發:英語常考1920個固定短語搭配,初中生抓緊列印一份!英語的基礎主要是單詞和短語。單詞不用多說,肯定要掌握記憶好。其次就是短語,英語短語運用的地方特別地多,從閱讀到寫作。短語也是英語這門學科的根基,掌握好了才能去學習更多的知識點。