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個：

利用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 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=https://www.cnblogs.com/Jafeney/p/"example.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 發布！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/932.html

標籤：JavaScript

上一篇：WEB前端第三十七課——jsBOM操作-DataParse、jsEngine、性能、history、道岔、closure

下一篇：URL地址值的獲取、前端跨域請求與傳過來的資料為xml的處理方式