CSS常考知識點

本章介紹一下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個：

1. 利用CSS級聯屬性，給該元素聲明一個優先級更高的選擇器，如：.example span {} 給span加個 .text的類： .example .text {}
2. 增加一個或多個其他元素，使選擇器變得更加具體，並獲得更高的優先級，如 .example .text {} 改成 .example > div > .text {}

面試官：剛提到了!important的弊端，那我們什麼時候可以使用!important呢？（發散題）

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

1. 一種情況是你的網站上有一個設定了全站樣式的CSS文件，同時你（或是你同事）寫了一些很差的內聯樣式。在這種情況下，你就可以在你全局的CSS文件中寫一些!important的樣式來覆蓋掉那些直接寫在元素上的行內樣式。
2. 第二種情況是已經給某個樣式加持了優先級非常高的選擇器，在無法改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 class="container">
  <div class="content">內容</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 發佈！