目錄

標準盒模型與 IE 盒模型的區別是什么？如何通過 box-sizing 屬性切換這兩種盒模型？

如何計算一個元素在標準盒模型下的總寬度（包含 margin、padding、border）？

父元素高度塌陷的原因是什么？請列舉至少 3 種清除浮動的方法。

方法一：使用 clear 屬性

方法二：使用 BFC（塊級格式化上下文）

方法三：使用偽元素

margin 負值的作用是什么？請舉例說明其應用場景。

inline、block、inline-block 元素的特性差異是什么？它們各自的使用場景有哪些？

如何實現一個元素水平居中？請至少提供 4 種方案。

如何實現未知寬高元素的水平垂直居中？請至少提供 3 種方案。

position: absolute 的定位基準是什么？它與 position: fixed 有何區別？

z-index 生效的條件是什么？層疊上下文是如何形成的？

display: none 與 visibility: hidden 的區別是什么？它們對頁面渲染分別有什么影響？

overflow: hidden 為何能觸發 BFC（塊級格式化上下文）？請列舉其他觸發 BFC 的方式。

如何用 CSS 實現一個寬高比為 16:9 的自適應容器？

Flex 布局的主軸與交叉軸是如何定義的？flex-direction 的取值有哪些？

如何通過 Flex 實現 “左側固定寬度，右側自適應” 布局？

justify-content 和 align-items 分別控制什么方向的對齊？

Flex 項目中 flex: 1 的含義是什么？它等價于哪些屬性的組合？

Grid 布局中 fr 單位的作用是什么？如何定義網格軌道？

如何實現一個三欄布局（兩側固定，中間自適應）？請至少提供 3 種方案。

Grid 的 grid-template-areas 屬性如何實現復雜布局？

如何讓 Grid 項目在單元格內水平和垂直居中？

對比 Flex 與 Grid 布局的適用場景及優缺點分別是什么？

如何用 Grid 實現響應式布局（如不同屏幕尺寸下自動調整列數）？

BFC 的特性有哪些？請舉例說明 BFC 解決的實際問題（如 margin 合并）。

如何通過 BFC 避免浮動導致的父元素高度塌陷？

同一個 BFC 內的垂直 margin 為何會合并？如何避免這種合并？

BFC 區域為何不會與浮動元素重疊？請舉例說明其應用場景。

解釋 “包含塊（Containing Block）” 的概念及其對定位的影響。

什么是層疊上下文？哪些屬性會觸發層疊上下文？

瀏覽器渲染過程中重排（Reflow）與重繪（Repaint）的區別是什么？有哪些優化策略？

CSS 中硬件加速的原理是什么？有哪些實現方式（如 transform 屬性）？

CSS 選擇器優先級計算規則是什么？比較 #id .class 與 div:hover 的優先級。

:nth-child (n) 與:nth-of-type (n) 的區別是什么？

屬性選擇器 [attr^="val"]、[attr$="val"]、[attr*="val"] 的作用差異是什么？

偽類:hover 與偽元素::after 的本質區別是什么？

如何通過 CSS 選擇器選中表單中所有未填寫的必填項（input:required:invalid）？

解釋:not () 偽類的使用場景及它對優先級的影響

CSS 變量（Custom Properties）的優勢是什么？如何用 JavaScript 動態修改 CSS 變量？

transform 屬性支持哪些變換類型？transform 與 transition 如何配合實現動畫？

如何用 clip-path 裁剪出圓形、多邊形或自定義形狀？

@media 媒體查詢的常用參數有哪些？如何適配暗色模式？

aspect - ratio 屬性的作用是什么？有哪些兼容性處理方案？

will - change 屬性的優化原理是什么？使用時的注意事項有哪些？

如何用 CSS 實現漸變背景、陰影和模糊效果？

contain 屬性的性能優化原理是什么？它的適用場景有哪些？

 

移動端 1 像素邊框問題的成因是什么？有哪些解決方案？

1. 使用 transform 縮放

2. 使用 viewport 布局視口

3. 使用 SVG 邊框

transition 與 animation 的區別是什么？它們各自的適用場景有哪些？

如何實現動畫的暫停與重啟（animation-play-state）？

如何通過 requestAnimationFrame 優化 CSS 動畫性能？

列舉 CSS 動畫性能優化的常見手段（如減少重繪）。

CSS 預處理器（如 Sass/Less）的核心功能有哪些？

如何實現 CSS 模塊化（如 CSS Modules 或 Scoped CSS）

PostCSS 的作用是什么？請舉例說明常用插件（如 Autoprefixer）

對比 CSS - in - JS 方案與傳統 CSS 的優缺點

常見瀏覽器兼容性問題有哪些？對應的解決方案是什么（如 IE 盒模型、Flex 兼容）

解釋 FOUC（無樣式內容閃爍）的成因是什么？有哪些避免方法

---