章介紹一下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 發布！

文本編輯器是一種可內嵌于瀏覽器，所見即所得的文本編輯器。它提供類似于Office Word 的編輯功能，方便那些不太懂html用戶使用，富文本編輯器的應用非常廣泛，它的歷史與圖文網頁誕生的歷史幾乎一樣長。

作為一個技術人員，手上備上兩款富文本編輯器還是很有用的，指不定那個項目就要集成一個進去。

到時候現找現用那可就費功夫了，畢竟從開發上講，每個富文本編輯器的用法都是有區別的。

下面是我收集的一些業界比較受歡迎的富文本編輯器，喜歡的朋友、用過的朋友可以一起看看，一起探討。

1、wangEditor

網址：http://www.wangeditor.com/

基于JavaScript和css開發的 Web富文本編輯器， 輕量、簡潔、界面美觀、易用、開源免費。

兼容性

• 兼容主流的 PC 瀏覽器，如 Chrome Firefox Safari Edge 等
• 暫不支持移動端編輯（支持移動端查看）
• 不再支持 IE 瀏覽器

2、TinyMCE

網址：https://www.tiny.cloud/docs/demo/full-featured/

TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器，由JavaScript寫成。它對IE6+和Firefox1.5+都有著非常良好的支持。

功能齊全，界面美觀，就是文檔是英文的，對開發人員英文水平有一定要求。

3、百度ueditor

網址：https://github.com/fex-team/ueditor

UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，功能齊全，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼，缺點是已經沒有更新了。

4、kindeditor

網址：http://kindeditor.net/demo.php

KindEditor 是一套開源的在線html編輯器，主要用于讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。

KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、php、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。

主要特點

快速：體積小，加載速度快

開源：開放源代碼，高水平，高品質

底層：內置自定義 DOM 類庫，精確操作 DOM

擴展：基于插件的設計，所有功能都是插件，可根據需求增減功能

風格：修改編輯器風格非常容易，只需修改一個 CSS 文件

兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera

5、Textbox

網址：https://www.textbox.io/

Textbox是一款極簡但功能強大的在線文本編輯器，支持桌面設備和移動設備。主要功能包含內置的圖像處理和存儲、文件拖放、拼寫檢查和自動更正。

此外，該工具還實現了屏幕閱讀器等輔助技術，并符合WAI-ARIA可訪問性標準。

6、CKEditor

網址：https://ckeditor.com/ckeditor-5/demo/

CKEditor官方版是一款專業專業的在線文字編輯器，軟件支持各種不同的瀏覽器，可以讓用戶們輕松在線編輯，CKEditor5官方版軟件體積非常小巧，使用起來也十分方便快捷，還能與不同的編程語言相結合，是大家編輯網頁代碼的必備工具。

7、quill

網址：https://quilljs.com/

Quill是輕型的編輯器，樣式一般（黑白風），功能中等，它的代碼高亮功能比較強，同樣支持行內編輯模式，工具條可自定義。

開源免費，項目活躍，一直有人維護。

8、simditor

網址：https://simditor.tower.im/

simditor是Tower平臺使用的富文本編輯器，是一款輕量化的編輯器，界面簡約，功能實用，插件不是很多，功能要求不高的可以使用。

雖然是國內出品，但文檔是英文的。開源免費。

9、summernote

網址：https://summernote.org/

summernote是一款輕量級的富文本編輯器，比較容易上手，使用體驗流暢，支持各種主流瀏覽器。

summernote開源免費，該項目一直比較活躍，一直都有人在維護。summernote同樣依賴于jquery和bootstrap，使用前先引入這兩項。

10、jodit

網址：https://xdsoft.net/jodit/

Jodit是一款使用純TypeScript編寫的（無需使用其他庫），美觀實用的所見即所得（WYSIWYG）開源富文本編輯器，支持中文，超強自定義。

11、Editor.md

網址：https://pandao.github.io/editor.md/

功能非常豐富的編輯器，左端編輯，右端預覽，非常方便，完全免費。

主要特性

• 支持“標準”Markdown / CommonMark和Github風格的語法，也可變身為代碼編輯器；
• 支持實時預覽、圖片（跨域）上傳、預格式文本/代碼/表格插入、代碼折疊、搜索替換、只讀模式、自定義樣式主題和多語言語法高亮等功能；
• 支持ToC（Table of Contents）、Emoji表情、Task lists、@鏈接等Markdown擴展語法；
• 支持TeX科學公式（基于KaTeX）、流程圖 Flowchart 和 時序圖 Sequence Diagram;
• 支持識別和解析HTML標簽，并且支持自定義過濾標簽解析，具有可靠的安全性和幾乎無限的擴展性；
• 支持 AMD / CMD 模塊化加載（支持 Require.js & Sea.js），并且支持自定義擴展插件；
• 兼容主流的瀏覽器（IE8+）和Zepto.js，且支持iPad等平板設備；

12、froala Editor

網址：https://www.froala.com/wysiwyg-editor

界面非常好看，功能非常強大，非常好用（非免費，可破解）

13、eWebEditor

網址：http://www.ewebeditor.net/

eWebEditor外觀和使用風格都和微軟 Word很類似，功能很多。工具條可以定制，運行速度很快。

導入文件接口很多，支持word、excel、pdf、ppt直接導入，目前版本不支持代碼高亮，不適合純技術平臺使用，適合內容編輯人員使用。

eWebEditor有很長的歷史了，是典型的傳統富文本編輯器，不論是界面，還是功能都比較傳統。eWebEditor是收費的，但也有免費的精簡版，精簡版沒有后臺功能。

14、dhtmlxEditor

網址：https://dhtmlx.com/docs/products/dhtmlxRichText/

DHTMLX組件是一整套基于js的UI庫，功能強大，其中包含編輯器dhtmlxEditor。

該編輯器可以直接集成到Angular，react和vue.js框架中，該編輯器還同時支持Markdown和富文本。

支持普通視圖和類似word一樣的頁面視圖，支持全屏幕，工具支持自定義，包括工具條顏色和樣式等。

dhtmlxEditor分為免費版和收費版，免費版具有絕大多數功能，而且免費版是開源的你可以在代碼級別隨便擴充。

最后

富文本編輯器產品真的非常多，以上只是本人接觸過的一些，相信還有很多很好的富文本存在，其實也沒必要全都試一遍，只有最適合自己的，才是最好的。

種3D盒子收起來的動畫效果是怎么實現的？1分鐘就可以教會你。

經過前兩節課的學習，大家應該都知道給容器設置3D屬性是編寫3D動畫的前提。

·首先給容器body設置3D動畫屬性。

·接下來肯定就是要寫盒子了，盒子一般有6個面，聰明的各位肯定能夠想到先寫6個面用來展示盒子的6個平面，這種思路肯定是沒有錯的。借助動畫的3D旋轉、3D位移等等屬性，肯定可以將6個面去組合組裝成一個盒子。但是想要讓6個DIV組成盒子進行立體旋轉，沒有一個平面的支撐其實是白費力氣。

·如果先寫一個div作為立方體盒子的參考平面，讓平面帶動6個面進行旋轉位移，就變得非常簡單了。首先在盒子容器中添加6個div作為盒子6個面，但是記得把盒子的最后兩個面用同一個div包裹起來。至于為什么，一會來詳細講解。先看一下實現的效果，好像還不錯。

·然后去拆解剛才的動畫動作，通過代碼的旋轉位移實現一個正方體。利用動畫屬性將組成正方體的平面位移旋轉動作進行拆解，利用@keyframes進行逐幀延遲調用，這樣就能實現一個完整的動畫的演示。

·一個正方體的動畫折疊動作就已經寫完了，回顧一下最后兩個面的折疊。如果想要讓兩個面變成一個協調的整體，是需要將最后兩個面一起產生折疊動作的，拆分開來去寫兩個平面，無法實現這種合并動畫的效果。

·最后給整個平面添加上隨機的角度旋轉和剛才的折疊動畫進行組合，一個完整的盒子折疊動畫就完成了。

點贊&關注AUVWEB。