2025年前端css面試題2025年及答案1.盒模型的標(biāo)準(zhǔn)模式與怪異模式的核心區(qū)別是什么？實(shí)際開(kāi)發(fā)中如何統(tǒng)一盒模型？標(biāo)準(zhǔn)模式下，元素的寬度（width）僅包含內(nèi)容區(qū)（content），內(nèi)邊距（padding）和邊框（border）會(huì)額外增加元素的總寬度；怪異模式（QuirksMode）則將width視為內(nèi)容區(qū)+內(nèi)邊距+邊框的總和，即總寬度等于設(shè)置的width值。兩者的差異源于早期瀏覽器對(duì)W3C標(biāo)準(zhǔn)的支持不一致。實(shí)際開(kāi)發(fā)中，通過(guò)在HTML文檔頂部聲明`<!DOCTYPEhtml>`強(qiáng)制觸發(fā)標(biāo)準(zhǔn)模式，同時(shí)使用`box-sizing:border-box`統(tǒng)一盒模型計(jì)算方式。例如：```css{box-sizing:border-box;margin:0;padding:0;}```此設(shè)置使所有元素的width包含content+padding+border，避免因盒模型差異導(dǎo)致的布局錯(cuò)位。2.觸發(fā)BFC的常見(jiàn)條件有哪些？列舉至少3種實(shí)際開(kāi)發(fā)中利用BFC解決的問(wèn)題。觸發(fā)BFC的條件包括：浮動(dòng)元素（float不為none）、絕對(duì)定位/固定定位元素（position為absolute或fixed）、行內(nèi)塊元素（display:inline-block）、表格單元格（display:table-cell）、溢出不為visible的元素（overflow不為visible）、彈性容器（display:flex/grid的直接子元素）等。實(shí)際應(yīng)用場(chǎng)景：-解決浮動(dòng)元素導(dǎo)致的父容器高度塌陷：將父元素設(shè)置為`overflow:auto`觸發(fā)BFC，使其包含浮動(dòng)子元素。-避免相鄰塊級(jí)元素的margin重疊：將其中一個(gè)元素包裹在BFC容器中（如設(shè)置`display:inline-block`），使兩個(gè)元素的margin不再合并。-實(shí)現(xiàn)兩欄自適應(yīng)布局：左側(cè)浮動(dòng)，右側(cè)設(shè)置`overflow:hidden`觸發(fā)BFC，右側(cè)內(nèi)容不會(huì)與左側(cè)浮動(dòng)元素重疊，且寬度自動(dòng)填充剩余空間。3.CSS選擇器的優(yōu)先級(jí)是如何計(jì)算的？當(dāng)!important、內(nèi)聯(lián)樣式、id、.class沖突時(shí)，優(yōu)先級(jí)順序是怎樣的？選擇器優(yōu)先級(jí)由匹配的特定性（Specificity）決定，計(jì)算規(guī)則為四元組（行內(nèi)樣式數(shù),ID數(shù),類/偽類數(shù),元素/偽元素?cái)?shù)）。例如：-內(nèi)聯(lián)樣式：(1,0,0,0)-id：(0,1,0,0)-.class：(0,0,1,0)-元素選擇器：(0,0,0,1)當(dāng)沖突時(shí)，優(yōu)先級(jí)順序?yàn)椋?important>內(nèi)聯(lián)樣式>id>.class>元素選擇器。但需注意，!important會(huì)覆蓋同屬性的其他聲明（包括內(nèi)聯(lián)樣式），除非另一個(gè)!important聲明在后面的樣式表中。例如：```cssbox{color:red;}/優(yōu)先級(jí)(0,1,0,0)/.box{color:blue;}/優(yōu)先級(jí)(0,0,1,0)/div.box{color:green;}/優(yōu)先級(jí)(0,0,1,1)，高于單個(gè).class/```若內(nèi)聯(lián)樣式為`style="color:black;"`（優(yōu)先級(jí)1,0,0,0），則覆蓋id選擇器；若給.class添加`color:yellow!important`，則會(huì)覆蓋內(nèi)聯(lián)樣式。4.Flex布局中flex:1的完整展開(kāi)形式是什么？當(dāng)子元素寬度超過(guò)容器時(shí)，flex:1的元素會(huì)如何收縮？flex:1是`flex-grow:1;flex-shrink:1;flex-basis:0%`的簡(jiǎn)寫(xiě)。其中：-flex-grow：定義元素的擴(kuò)展比例（默認(rèn)0，不擴(kuò)展）。-flex-shrink：定義元素的收縮比例（默認(rèn)1，可收縮）。-flex-basis：定義元素在分配剩余空間前的初始大小（默認(rèn)auto，基于內(nèi)容計(jì)算）。當(dāng)子元素總寬度超過(guò)容器時(shí)，flex-shrink生效。收縮量計(jì)算公式為：`收縮量=(子元素超出容器的寬度)×(flex-shrink×子元素flex-basis)/總收縮因子`例如，容器寬度300px，三個(gè)子元素flex:1（flex-basis:0%，即初始寬度0），但實(shí)際內(nèi)容寬度分別為100px、200px、300px（總600px，超出300px）?？偸湛s因子為1×0+1×0+1×0=0（因flex-basis為0%），此時(shí)瀏覽器會(huì)按內(nèi)容寬度比例收縮，最終三個(gè)元素寬度可能為50px、100px、150px（總300px）。5.Grid布局與Flex布局的核心差異是什么？在哪些場(chǎng)景下更適合使用Grid？核心差異：Flex是一維布局（主軸或交叉軸），專注于單行/單列的空間分配；Grid是二維布局，支持行和列的同時(shí)定義，可精確控制網(wǎng)格項(xiàng)的位置和大小。Grid更適合的場(chǎng)景：-復(fù)雜的多列布局（如棋盤(pán)式卡片墻、導(dǎo)航+主內(nèi)容+側(cè)邊欄的多區(qū)域布局）。-需要元素跨多行/多列（如`grid-column:span2`）。-固定網(wǎng)格線（如12列響應(yīng)式布局，通過(guò)`grid-template-columns:repeat(12,1fr)`定義）。例如，實(shí)現(xiàn)一個(gè)包含頭部、導(dǎo)航、主內(nèi)容、側(cè)邊欄、底部的頁(yè)面結(jié)構(gòu)，使用Grid可通過(guò)`grid-template-areas`直接劃分區(qū)域：```css.container{display:grid;grid-template-areas:"headerheader""navmain""asidemain""footerfooter";grid-template-rows:auto1frautoauto;grid-template-columns:200px1fr;}```6.CSS變量（自定義屬性）的作用域是如何定義的？與Sass變量相比，CSS變量有哪些不可替代的優(yōu)勢(shì)？CSS變量以`--`開(kāi)頭（如`--primary-color`），作用域由級(jí)聯(lián)規(guī)則決定：在某個(gè)元素聲明的變量，可被其所有子元素繼承（除非被覆蓋）。例如：```css:root{--color:red;}/全局作用域/.box{--color:blue;}/.box及其子元素優(yōu)先使用blue/.text{color:var(--color);}/繼承最近的--color值/```與Sass變量的區(qū)別及優(yōu)勢(shì)：-動(dòng)態(tài)性：CSS變量可通過(guò)JavaScript修改（如`element.style.setProperty('--color','green')`），實(shí)現(xiàn)運(yùn)行時(shí)主題切換；Sass變量在構(gòu)建時(shí)編譯為具體值，無(wú)法動(dòng)態(tài)調(diào)整。-級(jí)聯(lián)性：CSS變量支持層疊和繼承，可針對(duì)不同元素作用域覆蓋；Sass變量是靜態(tài)的，作用域由編譯時(shí)的嵌套結(jié)構(gòu)決定。-與CSS函數(shù)集成：可結(jié)合`calc()`、`clamp()`等函數(shù)動(dòng)態(tài)計(jì)算（如`width:calc(var(--base-width)2)`），Sass變量需在編譯時(shí)完成計(jì)算。7.容器查詢（ContainerQueries）與媒體查詢（MediaQueries）的主要區(qū)別是什么？請(qǐng)用具體代碼說(shuō)明如何為一個(gè)卡片組件設(shè)置容器查詢。核心區(qū)別：媒體查詢基于視口（viewport）寬度調(diào)整樣式，適用于全局響應(yīng)；容器查詢基于元素自身容器的寬度調(diào)整樣式，適用于局部組件級(jí)響應(yīng)。例如，一個(gè)卡片組件在大屏中可能占滿800px寬度，在側(cè)邊欄中僅占300px寬度，容器查詢可針對(duì)卡片的容器寬度獨(dú)立調(diào)整布局，無(wú)需依賴視口大小。設(shè)置容器查詢的步驟：1.為容器元素聲明`container-type`（指定查詢維度，如`inline-size`表示行內(nèi)方向?qū)挾龋┖蚡container-name`（可選，為容器命名以便復(fù)用）。2.使用`@container`規(guī)則定義查詢條件。示例代碼：```html<divclass="card-container"><divclass="card"><h3>標(biāo)題</h3><p>內(nèi)容...</p></div></div><style>.card-container{container-type:inline-size;/基于容器的寬度查詢/container-name:card-container;/命名容器/max-width:800px;/容器最大寬度/margin:0auto;}.card{padding:20px;border:1pxsolidddd;}/當(dāng)容器寬度≥600px時(shí)調(diào)整樣式/@containercard-container(min-width:600px){.card{display:flex;gap:20px;}.cardh3{font-size:1.5rem;}}/當(dāng)容器寬度<400px時(shí)調(diào)整文字大小/@container(max-width:400px){.cardp{font-size:0.9rem;}}</style>```此方案中，卡片的布局會(huì)根據(jù)其所在容器的寬度獨(dú)立變化，無(wú)需等待視口寬度變化，更適合組件化開(kāi)發(fā)。8.什么是層疊上下文（StackingContext）？列舉至少4種觸發(fā)層疊上下文的條件，并說(shuō)明層疊順序的具體規(guī)則。層疊上下文是HTML元素的三維概念，決定了元素在Z軸上的顯示順序。觸發(fā)層疊上下文的條件包括：-根元素（<html>）。-position為absolute或fixed的元素（且z-index不為auto）。-flex/grid容器的子元素（且z-index不為auto）。-opacity小于1的元素。-transform不為none的元素。-mix-blend-mode不為normal的元素。層疊順序（從下到上）：1.層疊上下文的背景和邊框（background/border）。2.負(fù)z-index的子層疊上下文（z-index<0）。3.塊級(jí)元素（display:block）。4.浮動(dòng)元素（float:left/right）。5.行內(nèi)/行內(nèi)塊元素（display:inline/inline-block）。6.z-index為0或auto的子層疊上下文。7.正z-index的子層疊上下文（z-index>0）。例如，一個(gè)position:relative且z-index:1的元素會(huì)覆蓋其兄弟元素中z-index:0的元素，但若其內(nèi)部有一個(gè)子元素z-index:-1，則該子元素會(huì)被父元素的背景覆蓋。9.CSS中重排（Reflow）與重繪（Repaint）的區(qū)別是什么？哪些CSS屬性的修改會(huì)觸發(fā)重排？如何優(yōu)化以減少重排次數(shù)？重排（Reflow）：瀏覽器重新計(jì)算元素的幾何屬性（位置、大?。?，導(dǎo)致布局重新渲染。重繪（Repaint）：元素的外觀變化（如顏色、透明度），但幾何屬性不變，只需重新繪制。重排的成本高于重繪。觸發(fā)重排的常見(jiàn)屬性：width/height、margin/padding、top/left、border、display、position（如從static改為absolute）、字體大小、內(nèi)容變化（如文本輸入）等。優(yōu)化策略：-合并樣式修改：使用`element.style.cssText`或先修改元素的class（通過(guò)添加預(yù)定義的CSS類），避免逐條修改樣式。-使用`transform`/`opacity`替代其他屬性：這兩個(gè)屬性由compositor線程處理，不觸發(fā)重排（需觸發(fā)層提升）。-避免頻繁讀取會(huì)觸發(fā)重排的屬性（如offsetWidth、getBoundingClientRect()），若必須讀取，可先緩存值。-將頻繁動(dòng)畫(huà)的元素脫離文檔流（如position:fixed/absolute），減少對(duì)其他元素的影響。-使用CSSContainment（如`contain:layoutpaint`），告知瀏覽器元素的變化不會(huì)影響外部，限制重排范圍。10.如何實(shí)現(xiàn)一個(gè)元素的平滑滾動(dòng)？請(qǐng)對(duì)比scroll-behavior:smooth與JavaScript滾動(dòng)API的優(yōu)缺點(diǎn)。實(shí)現(xiàn)平滑滾動(dòng)的方式：-CSS方案：給滾動(dòng)容器（如html或自定義容器）設(shè)置`scroll-behavior:smooth`。```csshtml{scroll-behavior:smooth;}```-JavaScript方案：使用`Element.scrollTo()`或`Element.scrollIntoView()`的選項(xiàng)參數(shù)。```javascript//滾動(dòng)到指定位置window.scrollTo({top:100,behavior:'smooth'});//滾動(dòng)到目標(biāo)元素document.querySelector('target').scrollIntoView({behavior:'smooth'});```兩者對(duì)比：-優(yōu)點(diǎn)：CSS方案簡(jiǎn)單，無(wú)需JS代碼，適合全局或固定容器的滾動(dòng)效果；JS方案更靈活，可控制滾動(dòng)起點(diǎn)、終點(diǎn)、持續(xù)時(shí)間（通過(guò)自定義動(dòng)畫(huà)），支持動(dòng)態(tài)計(jì)算目標(biāo)位置。-缺點(diǎn)：CSS方案無(wú)法控制滾動(dòng)速度或自定義動(dòng)畫(huà)曲線（僅支持ease）；JS方案需處理兼容性（部分舊瀏覽器不支持`behavior:'smooth'`），且頻繁調(diào)用可能影響性能。11.混合模式（mix-blend-mode）與濾鏡（filter）的區(qū)別是什么？舉例說(shuō)明混合模式在實(shí)際設(shè)計(jì)中的應(yīng)用場(chǎng)景?；旌夏Ｊ蕉x元素與其父元素或背景的像素如何混合顯示（基于顏色通道計(jì)算）；濾鏡（如filter:blur()、grayscale()）則對(duì)元素自身的像素進(jìn)行變換（如模糊、灰度化）?；旌夏Ｊ降膽?yīng)用場(chǎng)景：-文字與背景的融合：例如，在漸變背景上放置文字，使用`mix-blend-mode:screen`使文字顏色與背景漸變混合，形成通透效果。```css.background{background:linear-gradient(45deg,ff6b6b,4ecdc4);}.text{color:000;mix-blend-mode:screen;/文字顏色與背景混合，顯示為漸變效果/}```-圖片疊加效果：在兩張圖片疊加時(shí)，使用`mix-blend-mode:multiply`模擬照片重疊的暗部融合效果。-按鈕懸停動(dòng)畫(huà)：懸停時(shí)改變混合模式，使按鈕顏色與背景動(dòng)態(tài)交互（如`mix-blend-mode:overlay`）。12.@layer規(guī)則的作用是什么？如何利用@layer控制樣式的優(yōu)先級(jí)？請(qǐng)給出一個(gè)實(shí)際項(xiàng)目中的使用示例。@layer用于定義樣式層，控制不同層之間的優(yōu)先級(jí)。未指定層的樣式默認(rèn)屬于“默認(rèn)層”，而通過(guò)@layer聲明的層可按順序排列，后續(xù)層的樣式會(huì)覆蓋前面層的同名樣式（同一層內(nèi)仍遵循級(jí)聯(lián)規(guī)則）。作用：-管理第三方庫(kù)與自定義樣式的優(yōu)先級(jí)（如確保自定義樣式覆蓋庫(kù)樣式）。-避免大量使用!important，通過(guò)層順序控制優(yōu)先級(jí)。示例：```css/聲明三個(gè)層，順序?yàn)椋篵ase<components<utilities/@layerbase,components,utilities;/base層：基礎(chǔ)樣式（最低優(yōu)先級(jí)）/@layerbase{button{padding:8px16px;border:none;}}/components層：組件樣式（優(yōu)先級(jí)高于base）/@layercomponents{.primary-btn{background:007bff;color:white;}}/utilities層：工具類（最高優(yōu)先級(jí)）/@layerutilities{.rounded{border-radius:8px;}}/未指定層的樣式屬于默認(rèn)層，優(yōu)先級(jí)低于所有聲明的層/button{font-size:14px;/會(huì)被base層的button樣式覆蓋，因?yàn)閎ase層在默認(rèn)層之前/}```此方案中，若第三方庫(kù)的樣式被包裹在base層，自定義的components層樣式可自然覆蓋它，無(wú)需使用!important。13.原子化CSS（如TailwindCSS）與傳統(tǒng)CSS架構(gòu)（如BEM）的核心差異是什么？各自的優(yōu)缺點(diǎn)有哪些？核心差異：原子化CSS將樣式拆分為單一功能的類（如`p-4`表示padding:1rem），通過(guò)組合類名實(shí)現(xiàn)樣式；傳統(tǒng)架構(gòu)（如BEM）強(qiáng)調(diào)類名的語(yǔ)義化（如`.card__title--active`），通過(guò)結(jié)構(gòu)命名管理樣式作用域。優(yōu)缺點(diǎn)對(duì)比：-原子化CSS：優(yōu)點(diǎn)：無(wú)需編寫(xiě)重復(fù)CSS，類名復(fù)用性高；減少CSS文件體積（按需打包未使用的類）；樣式修改直接通過(guò)類名調(diào)整，無(wú)需查找CSS選擇器。缺點(diǎn)：HTML標(biāo)簽類名冗長(zhǎng)，可讀性下降；復(fù)雜狀態(tài)（如:hover、@media）需結(jié)合變體類（如`hover:bg-blue-500`），學(xué)習(xí)成本較高；難以實(shí)現(xiàn)動(dòng)態(tài)樣式（如根據(jù)props動(dòng)態(tài)提供類名需依賴JS）。-傳統(tǒng)架構(gòu)（BEM）：優(yōu)點(diǎn)：類名語(yǔ)義明確（如`.header__nav-item`表明元素的結(jié)構(gòu)位置），團(tuán)隊(duì)協(xié)作時(shí)易理解；樣式集中管理，復(fù)雜狀態(tài)（如嵌套選擇器）更易維護(hù)。缺點(diǎn)：類名長(zhǎng)度隨結(jié)構(gòu)深度增加（如`.modal__content__button--disabled`）；樣式復(fù)用性低，相似組件需重復(fù)編寫(xiě)CSS；修改樣式需同時(shí)調(diào)整HTML類名和CSS選擇器，耦合性高。14.如何實(shí)現(xiàn)元素的漸進(jìn)式加載（如圖片懶加載的CSS方案）？與JavaScript方案相比，CSS方案的局限性是什么？CSS實(shí)現(xiàn)圖片懶加載的核心是利用`srcset`和`loading="lazy"`屬性（需瀏覽器支持）：```html<imgsrc="placeholder.jpg"srcset="image-small.jpg400w,image-large.jpg800w"loading="lazy"alt="示例圖">```當(dāng)圖片進(jìn)入視口時(shí)，瀏覽器自動(dòng)加載匹配的srcset資源。與JS方案（如IntersectionObserverAPI）相比，CSS方案的局限性：-兼容性：`loading="lazy"`在舊瀏覽器（如Safari15.4以下）不支持，需配合JS做降級(jí)處理。-控制粒度：無(wú)法自定義加載時(shí)機(jī)（如提前100px加載）或加載動(dòng)畫(huà)（如淡入效果），JS方案可通過(guò)監(jiān)聽(tīng)視口交集實(shí)現(xiàn)更精細(xì)的控制。-資源替換：CSS方案依賴srcset的預(yù)定義資源，無(wú)法動(dòng)態(tài)根據(jù)網(wǎng)絡(luò)狀態(tài)切換圖片質(zhì)量（如4G加載高清圖，Wi-Fi加載超高清圖），JS方案可結(jié)合`navigator.connection.effectiveType`動(dòng)態(tài)修改src。15.現(xiàn)代響應(yīng)式設(shè)計(jì)中，容器查詢是否會(huì)完全取代媒體查詢？為什么？請(qǐng)結(jié)合具體業(yè)務(wù)場(chǎng)景說(shuō)明兩者的協(xié)作方式。容器查詢不會(huì)完全取代媒體查詢，兩者解決不同維度的問(wèn)題：-媒體查詢基于視口，適合全局布局調(diào)整（如手機(jī)/平板/桌面的整體布局切換）。-容器查詢基于組件容器，適合局部組件的自適應(yīng)（如卡片、導(dǎo)航菜單在不同父容器中的樣式變化）。協(xié)作示例：一個(gè)電商頁(yè)面的商品列表，在視口寬度≥1200px時(shí)采用四列布局（媒體查詢控制全局網(wǎng)格列數(shù)），每個(gè)商品卡片在容器寬度<300px時(shí)隱藏價(jià)格標(biāo)簽（容器查詢控制卡片內(nèi)部樣式）。```css/媒體查詢：全局調(diào)整商品列表列數(shù)/@media(min-width:1200px){.product-list{grid-template-columns:repeat(4,1fr);}}@media(min-width:768px)and(max-width:1199px){.product-list{grid-template-columns:repeat(3,1fr);}}/容器查詢：控制單個(gè)商品卡片的內(nèi)部樣式/.product-card{container-type:inline-size;}@container(max-width:300px){.product-card.price{display:none;}}```此方案中，媒體查詢負(fù)責(zé)全局布局的大粒度調(diào)整，容器查詢負(fù)責(zé)組件內(nèi)部的小粒度優(yōu)化，兩者互補(bǔ)。16.CSSModules與CSS-in-JS（如styled-components）在作用域隔離上的實(shí)現(xiàn)原理有何不同？各自適用的項(xiàng)目場(chǎng)景是什么？實(shí)現(xiàn)原理差異：-CSSModules：在構(gòu)建時(shí)（如通過(guò)webpack的css-loader）將類名編譯為哈希值（如`.title`變?yōu)閌.title_abc123`），通過(guò)局部作用域?qū)崿F(xiàn)隔離，同時(shí)支持`:global()`聲明全局類。-CSS-in-JS：在運(yùn)行時(shí)通過(guò)JS動(dòng)態(tài)提供樣式（如styled-components將樣式字符串轉(zhuǎn)換為帶有唯一類名的<style>標(biāo)簽），利用閉包或作用域鏈確保樣式僅應(yīng)用于對(duì)應(yīng)組件。適用場(chǎng)景：-CSSModules：適合需要靜態(tài)樣式分析、構(gòu)建時(shí)優(yōu)化的項(xiàng)目（如傳統(tǒng)前端項(xiàng)目），對(duì)SEO友好（樣式在構(gòu)建時(shí)輸出，無(wú)運(yùn)行時(shí)JS依賴）。-CSS-in-JS：適合動(dòng)態(tài)樣式需求強(qiáng)的項(xiàng)目（如需要根據(jù)props動(dòng)態(tài)修改樣式、實(shí)現(xiàn)主題切換），或React生態(tài)中與組件深度耦合的場(chǎng)景（如樣式與組件邏輯一起維護(hù)）。17.如何優(yōu)化CSS的渲染性能？請(qǐng)從選擇器復(fù)雜度、樣式層級(jí)、動(dòng)畫(huà)實(shí)現(xiàn)等方面展開(kāi)說(shuō)明。優(yōu)化策略：-選擇器復(fù)雜度：避免嵌套過(guò)深的選擇器（如`divullia`），使用類名直接定位（如`.nav-link`）。瀏覽器匹配選擇器的順序是從右到左，復(fù)雜選擇器會(huì)增加匹配時(shí)間。-樣式層級(jí)：減少層疊上下文的嵌套（如避免多層position:relative+z-index），過(guò)多層疊上下文會(huì)增加合成層數(shù)量，消耗GPU內(nèi)存。-動(dòng)畫(huà)實(shí)現(xiàn)：優(yōu)先使用`transform`和`opacity`屬性（觸發(fā)合成層，由GPU加速），避免使用`top`/`left`/`width`等觸發(fā)重排的屬性。對(duì)于復(fù)雜動(dòng)畫(huà)，使用`will-change:transform`提示瀏覽器預(yù)分配資源，但避免濫用（可能導(dǎo)致內(nèi)存浪費(fèi)）。-減少@font-face的使用：字體文件加載會(huì)阻塞渲染，可通過(guò)`font-display:swap`設(shè)置字體未加載時(shí)使用系統(tǒng)默認(rèn)字體，避免白屏。-壓縮與合并：構(gòu)建時(shí)壓縮CSS（如使用cssnano），合并重復(fù)的樣式規(guī)則，減少CSS文件體積，加速下載和解析。18.什么是視口單位（vh/vw）？在移動(dòng)端開(kāi)發(fā)中使用視口單位可能遇到哪些問(wèn)題？如何解決？視口單位基于視口尺寸計(jì)算：1vh為視口高度的1%，1vw為視口寬度的1%，1vmin為vh和vw中的較小值，1vmax為較大值。移動(dòng)端常見(jiàn)問(wèn)題及解決方案：-虛擬鍵盤(pán)遮擋：當(dāng)輸入框聚焦時(shí)，移動(dòng)端視口高度（vh）會(huì)被鍵盤(pán)壓縮，導(dǎo)致元素位置錯(cuò)亂。解決方案：使用`dvh`（動(dòng)態(tài)視口高度，瀏覽器自動(dòng)適配鍵盤(pán)）替代`vh`（需瀏覽器支持），或通過(guò)JS監(jiān)聽(tīng)`resize`事件動(dòng)態(tài)調(diào)整。-橫屏/豎屏切換：橫屏?xí)rvh/vw的基準(zhǔn)變化，可能導(dǎo)致元素尺寸突變?？山Y(jié)合媒體查詢（如`@media(orientation:landscape)`）調(diào)整布局。-小數(shù)像素問(wèn)題：vh/vw計(jì)算可能產(chǎn)生小數(shù)像素（如3.333px），部分瀏覽器會(huì)四舍五入，導(dǎo)致布局偏差?？赏ㄟ^(guò)`clamp()`函數(shù)限制最小值（如`width:clamp(100px,50vw,300px)`）。19.如何實(shí)現(xiàn)一個(gè)自適應(yīng)的垂直水平居中方案？請(qǐng)至少提供3種不同的技術(shù)實(shí)現(xiàn)，并對(duì)比各自的優(yōu)缺點(diǎn)。方案1：Flex布局```css.parent{display:flex;justify-content:center;/水平居中/align-items:center;/垂直居中/}```優(yōu)點(diǎn)：代碼簡(jiǎn)潔，兼容性好（現(xiàn)代瀏覽器）；子元素可自動(dòng)收縮，適合任意大小的子元素。缺點(diǎn)：對(duì)IE11需前綴支持，舊瀏覽器可能不兼容。方案2：絕對(duì)定位+transform```css.parent{position:relative;}.child{position:absolute;top:50%;left:5