1、CSS的盒模型

2、CSS選擇器及其優先級

• 對于選擇器的優先級：
  內聯樣式：1000
  id 選擇器：100
  類選擇器、偽類選擇器、屬性選擇器：10
  標簽選擇器、偽元素選擇器：1

• 注意事項：
  !important聲明的樣式的優先級最高；
  如果優先級相同，則最后出現的樣式生效；
  繼承得到的樣式的優先級最低；
  通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）并不在這四個等級中，所以它們的權值都為 0 ；
  樣式表的來源不同時，優先級順序為：內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 >瀏覽器默認樣式。

3、隱藏元素的方法有那些

4、px、em、rem的區別及使用場景

5、重排、重繪有什么區別

6、水平垂直居中的實現

7、CSS中可繼承與不可繼承屬性有哪些

8、Sass、Less 是什么？為什么要使用他們？

9、CSS預處理器/后處理器是什么？為什么要使用它們？

10、CSS3新特性

11、rem是如何做適配的

主要功能是實現響應式布局的適配，確保在不同設備和屏幕寬度下，頁面的布局和字體大小能夠自適應。通過動態設置 rem單位和檢測設備特性，代碼可以解決高清屏上的 1px 邊框問題，并確保布局的一致性。

(function flexible(window, document) {// 首先是一個立即執行函數，執行的時候傳入參數window和documentvar docEl = document.documentElement; // 返回文檔的root元素，即根元素htmlvar dpr = window.devicePixelRatio || 1; // 獲取設備的dpr，即當前設置下物理像素與虛擬像素的比值// 調整body標簽的fontSize// 設置默認字體的大小，默認字體的大小繼承自bodyfunction setBodyFontSize() {if (document.body) {// 如果document.body存在，則直接設置body的字體大小document.body.style.fontSize = (12 * dpr) + 'px';} else {// 如果document.body不存在，則等待DOM加載完成后設置document.addEventListener('DOMContentLoaded', setBodyFontSize);}}setBodyFontSize(); // 調用函數設置body的字體大小// 設置 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 10; // 計算rem的值，將viewportWidth分為10份docEl.style.fontSize = rem + 'px'; // 設置html元素的字體大小為rem}setRemUnit(); // 調用函數設置rem單位// 在頁面resize或者pageshow時重新設置remwindow.addEventListener('resize', setRemUnit); // 窗口大小變化時重新設置remwindow.addEventListener('pageshow', function (e) {if (e.persisted) { // 某些瀏覽器，重新展示頁面時，走的是頁面展示緩存setRemUnit(); // 重新設置rem單位}});// 檢測0.5px的支持，支持則root元素的class有hairlines// 解決1px在高清屏多像素問題if (dpr >= 2) { // 如果設備像素比大于等于2var fakeBody = document.createElement('body'); // 創建一個虛擬的body元素var testElement = document.createElement('div'); // 創建一個測試元素testElement.style.border = '.5px solid transparent'; // 設置測試元素的邊框為0.5pxfakeBody.appendChild(testElement); // 將測試元素添加到虛擬body中docEl.appendChild(fakeBody); // 將虛擬body添加到文檔中if (testElement.offsetHeight === 1) { // 檢測測試元素的高度是否為1docEl.classList.add('hairlines'); // 如果支持0.5px，則為html元素添加hairlines類}docEl.removeChild(fakeBody); // 移除虛擬body}
})(window, document);

12、移動端兼容性問題

13、display的屬性值及其作用

14、display的block、inline和inline-block的區別