高頻關(guān)于css面試題及答案CSS盒模型的標(biāo)準(zhǔn)實(shí)現(xiàn)與IE模型有何差異？如何通過(guò)CSS屬性統(tǒng)一兩者？標(biāo)準(zhǔn)盒模型中元素的寬度（width）僅包含內(nèi)容區(qū)域（content），不包含內(nèi)邊距（padding）和邊框（border）；IE盒模型（怪異模式）則將width定義為內(nèi)容+內(nèi)邊距+邊框的總寬度。例如，設(shè)置width:200px、padding:10px、border:2px時(shí)，標(biāo)準(zhǔn)模型的實(shí)際占位寬度為200+102+22=224px，而IE模型的實(shí)際內(nèi)容寬度為200-102-22=176px。通過(guò)設(shè)置box-sizing屬性可統(tǒng)一：box-sizing:content-box為標(biāo)準(zhǔn)模型（默認(rèn)值），box-sizing:border-box為IE模型。實(shí)際開發(fā)中，為避免不同瀏覽器的默認(rèn)差異，常用全局樣式{box-sizing:border-box}重置。BFC（塊格式化上下文）的觸發(fā)條件和典型應(yīng)用場(chǎng)景有哪些？BFC是Web頁(yè)面中CSS渲染的獨(dú)立區(qū)域，內(nèi)部元素的布局不受外部影響，且計(jì)算高度時(shí)會(huì)包含浮動(dòng)子元素。觸發(fā)條件包括：根元素（html）、float不為none、position為absolute或fixed、display為inline-block/table-cell/table-caption/flex/grid、overflow不為visible（常見(jiàn)如overflow:hidden）。應(yīng)用場(chǎng)景包括：解決相鄰塊級(jí)元素的margin重疊（兩個(gè)BFC中的元素不會(huì)重疊）、防止浮動(dòng)元素被文字環(huán)繞覆蓋（父元素觸發(fā)BFC后，浮動(dòng)子元素的高度會(huì)被計(jì)算，避免后續(xù)元素上移）、清除浮動(dòng)（父元素觸發(fā)BFC后，無(wú)需額外clear:both即可包含浮動(dòng)子元素）。例如，當(dāng)父容器包含浮動(dòng)子元素但高度塌陷時(shí)，給父容器設(shè)置overflow:auto即可觸發(fā)BFC，恢復(fù)正確高度。CSS選擇器的優(yōu)先級(jí)是如何計(jì)算的？是否存在例外情況？選擇器優(yōu)先級(jí)由四個(gè)層級(jí)的數(shù)值（行內(nèi)樣式、ID、類/偽類/屬性、標(biāo)簽/偽元素）決定，從高到低依次為：!important（最高優(yōu)先級(jí)，需謹(jǐn)慎使用）>行內(nèi)樣式（1,0,0,0）>ID選擇器（0,1,0,0）>類/屬性/偽類選擇器（0,0,1,0）>標(biāo)簽/偽元素選擇器（0,0,0,1）>通配符選擇器（0,0,0,0）。計(jì)算時(shí)逐位比較，高位數(shù)值大的優(yōu)先級(jí)更高，同層級(jí)數(shù)值相加。例如，nav.item（0,1,1,0）優(yōu)先級(jí)高于divnav（0,1,0,1），因?yàn)榈诙籌D選擇器均為1，但第三位類選擇器1大于標(biāo)簽選擇器1？不，實(shí)際是第二位ID選擇器為1時(shí)，第三位類選擇器為1的總優(yōu)先級(jí)是（0,1,1,0），而標(biāo)簽選擇器為1的是（0,1,0,1），此時(shí)比較第三位，1>0，因此nav.item優(yōu)先級(jí)更高。例外情況：!important會(huì)覆蓋普通規(guī)則（但行內(nèi)樣式的!important優(yōu)先級(jí)高于外部樣式的!important）；繼承的樣式優(yōu)先級(jí)最低，即使被標(biāo)記為!important也無(wú)法覆蓋顯式設(shè)置的樣式（如父元素color:red!important，子元素未設(shè)置color，則子元素繼承red，但若子元素設(shè)置color:blue，則blue生效）。Flex布局中justify-content與align-items的區(qū)別是什么？如何讓一個(gè)子元素單獨(dú)偏離對(duì)齊規(guī)則？justify-content控制flex容器主軸（默認(rèn)水平方向）上的子元素對(duì)齊方式，可選值包括flex-start（左對(duì)齊，默認(rèn)）、flex-end（右對(duì)齊）、center（居中）、space-between（兩端對(duì)齊，中間等距）、space-around（每個(gè)元素兩側(cè)等距，兩端間距為中間的一半）、space-evenly（所有間距相等）。align-items控制交叉軸（默認(rèn)垂直方向）的對(duì)齊方式，可選值包括stretch（拉伸填充，默認(rèn)）、flex-start（頂部對(duì)齊）、flex-end（底部對(duì)齊）、center（垂直居中）、baseline（基線對(duì)齊）。若需讓某個(gè)子元素單獨(dú)調(diào)整交叉軸對(duì)齊方式，可使用align-self屬性（取值與align-items相同），它會(huì)覆蓋父容器的align-items設(shè)置。例如，父容器設(shè)置align-items:center，某個(gè)子元素設(shè)置align-self:flex-end，則該元素會(huì)單獨(dú)在交叉軸底部對(duì)齊。CSS中實(shí)現(xiàn)元素水平垂直居中的常用方法有哪些？各有什么優(yōu)缺點(diǎn)？（1）Flex布局：父容器設(shè)置display:flex;justify-content:center;align-items:center。優(yōu)點(diǎn)是代碼簡(jiǎn)潔，兼容性好（現(xiàn)代瀏覽器），子元素?zé)o需固定尺寸；缺點(diǎn)是對(duì)低版本IE（<10）不支持。（2）絕對(duì)定位+transform：子元素設(shè)置position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)。優(yōu)點(diǎn)是無(wú)需知道子元素寬高，適用于動(dòng)態(tài)內(nèi)容；缺點(diǎn)是transform可能引發(fā)性能問(wèn)題（但現(xiàn)代瀏覽器優(yōu)化較好），且依賴父容器position:relative/absolute/fixed。（3）絕對(duì)定位+marginauto：父容器position:relative，子元素position:absolute;left:0;right:0;top:0;bottom:0;margin:auto。優(yōu)點(diǎn)是兼容性好（IE9+），無(wú)需計(jì)算具體數(shù)值；缺點(diǎn)是子元素需有明確寬高（或通過(guò)max-width/max-height限制），否則無(wú)法居中。（4）行內(nèi)塊級(jí)元素+垂直對(duì)齊：父容器設(shè)置text-align:center;line-height:容器高度，子元素設(shè)置display:inline-block;vertical-align:middle。優(yōu)點(diǎn)是兼容IE8+；缺點(diǎn)是父容器需固定高度，子元素可能受行高影響產(chǎn)生額外間隙（可通過(guò)font-size:0消除）。（5）Grid布局：父容器設(shè)置display:grid;place-items:center。優(yōu)點(diǎn)是語(yǔ)法更簡(jiǎn)潔，支持更細(xì)粒度的對(duì)齊控制；缺點(diǎn)是對(duì)IE（除Edge）無(wú)支持。CSS變量（自定義屬性）的作用域和使用場(chǎng)景是什么？如何實(shí)現(xiàn)響應(yīng)式的變量值？CSS變量通過(guò)--變量名定義，作用域由所在選擇器的級(jí)聯(lián)上下文決定。例如，在:root中定義的變量（--main-color:red）為全局作用域，可在任意子元素中使用；在.class中定義的變量?jī)H在該類及其子元素中有效。使用var()函數(shù)調(diào)用，如color:var(--main-color)。使用場(chǎng)景包括統(tǒng)一主題色（通過(guò)修改根變量快速切換主題）、減少重復(fù)代碼（如多次使用的間距值）、與JavaScript交互（通過(guò)js讀取/修改變量值實(shí)現(xiàn)動(dòng)態(tài)樣式）。實(shí)現(xiàn)響應(yīng)式變量值可結(jié)合媒體查詢，在不同媒體查詢塊中重新定義變量。例如：:root{--card-width:300px;}@media(max-width:768px){:root{--card-width:250px;}}.card{width:var(--card-width);}當(dāng)屏幕寬度小于768px時(shí)，--card-width自動(dòng)更新為250px，所有使用該變量的元素寬度隨之變化。CSS中重排（回流）與重繪的區(qū)別是什么？如何優(yōu)化以減少性能損耗？重排是瀏覽器重新計(jì)算元素的幾何屬性（位置、大?。┎⒅匦屡帕胁季值倪^(guò)程，涉及DOM樹和渲染樹的更新；重繪是元素外觀（如顏色、背景）改變時(shí)，不影響布局的繪制過(guò)程。重排的成本高于重繪，因?yàn)樾枰匦掠?jì)算整個(gè)渲染流程。常見(jiàn)觸發(fā)重排的操作包括：修改元素尺寸（width/height/padding）、位置（top/left/margin）、顯示狀態(tài)（display:none）、字體大小，以及調(diào)用getComputedStyle()等讀取布局屬性的操作。觸發(fā)重繪的操作如修改color、background、box-shadow、visibility:visible（visibility:hidden會(huì)觸發(fā)重排嗎？不，visibility:hidden僅隱藏元素，不改變布局，因此觸發(fā)重繪；display:none會(huì)觸發(fā)重排）。優(yōu)化方法：（1）批量修改樣式：將多次樣式修改合并為一次（如先添加類名，再通過(guò)類名定義多個(gè)樣式）；（2）使用transform/opacity代替top/left/width等屬性（這兩個(gè)屬性由合成層處理，不觸發(fā)重排重繪）；（3）將頻繁變動(dòng)的元素脫離文檔流（如position:fixed/absolute），減少對(duì)其他元素的影響；（4）避免使用table布局（table的布局計(jì)算成本高）；（5）使用CSSContainment（如contain:layoutpaintsize），告知瀏覽器元素的變化范圍，限制重排范圍；（6）緩存布局屬性（如將offsetWidth存儲(chǔ)在變量中，避免多次讀取觸發(fā)重排）。CSS中z-index的工作原理是什么？層疊上下文的形成條件有哪些？z-index用于控制元素在z軸（垂直屏幕方向）的堆疊順序，僅對(duì)position為relative/absolute/fixed/sticky（部分瀏覽器）的元素有效，或display:flex/grid的子元素（即使position為static）。層疊上下文是由元素及其子元素組成的獨(dú)立堆疊空間，內(nèi)部元素的z-index僅在上下文中比較。形成層疊上下文的條件包括：（1）根元素（html）；（2）position不為static且z-index不為auto；（3）opacity小于1；（4）transform不為none；（5）mix-blend-mode不為normal；（6）filter不為none；（7）isolation:isolate（強(qiáng)制創(chuàng)建新上下文）；（8）display:flex/grid的子元素且z-index不為auto；（9）contain:layout/paint/content等（部分情況）。層疊順序（從后到前）為：層疊上下文背景和邊框→負(fù)z-index子元素→塊級(jí)子元素→浮動(dòng)子元素→行內(nèi)子元素→z-index:0或auto的子元素→正z-index子元素。例如，兩個(gè)父元素均為層疊上下文，子元素的z-index僅在各自父上下文中比較，父元素的堆疊順序由父元素的z-index決定。如何實(shí)現(xiàn)一個(gè)自適應(yīng)的正方形（寬度隨父容器變化，高度等于寬度）？（1）padding-top/padding-bottom法：利用padding百分比相對(duì)于父容器寬度計(jì)算的特性。例如，父容器寬度為20%，子元素設(shè)置width:100%;height:0;padding-top:100%，此時(shí)子元素的實(shí)際高度等于寬度（padding-top:100%即父容器寬度的100%）。（2）aspect-ratio屬性（CSS3）：直接設(shè)置aspect-ratio:1/1（寬高比1:1）。優(yōu)點(diǎn)是代碼簡(jiǎn)潔，支持現(xiàn)代瀏覽器（Chrome88+、Firefox89+）；缺點(diǎn)是IE不支持。（3）Flex布局+偽元素：父容器display:flex，子元素設(shè)置flex:1;min-width:0（防止內(nèi)容撐開寬度），并通過(guò)::before或::after偽元素設(shè)置content:"";width:0;padding-top:100%，利用偽元素的padding撐起高度。（4）Grid布局：父容器display:grid，子元素設(shè)置width:100%;height:0;padding-bottom:100%;grid-area:1/1/2/2（覆蓋到同一網(wǎng)格位置），確保內(nèi)容在正方形內(nèi)顯示。CSS中l(wèi)ink與@import的區(qū)別有哪些？（1）加載順序：link標(biāo)簽作為HTML元素，與頁(yè)面其他資源（如圖片）并行加載；@import是CSS規(guī)則，需等CSS文件加載完成后再加載，可能導(dǎo)致頁(yè)面渲染延遲。（2）兼容性：link無(wú)兼容問(wèn)題；@import在IE5以下不支持，且無(wú)法在媒體查詢外使用（部分舊瀏覽器）。（3）DOM操作：link可通過(guò)JavaScript動(dòng)態(tài)創(chuàng)建（如動(dòng)態(tài)切換樣式表）；@import無(wú)法在運(yùn)行時(shí)動(dòng)態(tài)加載。（4）權(quán)重：通過(guò)link引入的樣式與@import引入的樣式遵循層疊規(guī)則，但若@import在link之后，其樣式會(huì)覆蓋link中未指定!important的同名規(guī)則。（5）媒體查詢支持：link標(biāo)簽的media屬性可指定媒體類型（如media="screen"）；@import可在CSS中使用媒體查詢（如@importurl(a.css)screenand(max-width:768px)）。CSS動(dòng)畫中transition與animation的區(qū)別是什么？如何實(shí)現(xiàn)一個(gè)無(wú)限循環(huán)的呼吸效果？transition用于實(shí)現(xiàn)元素從一種狀態(tài)到另一種狀態(tài)的平滑過(guò)渡，依賴狀態(tài)變化（如:hover、:active或JS動(dòng)態(tài)修改類），只能定義開始和結(jié)束兩個(gè)關(guān)鍵幀。animation通過(guò)@keyframes定義多個(gè)關(guān)鍵幀（0%、50%、100%等），可獨(dú)立運(yùn)行（無(wú)需狀態(tài)觸發(fā)），支持循環(huán)、延遲、方向控制等。實(shí)現(xiàn)無(wú)限循環(huán)呼吸效果示例：@keyframesbreathe{0%{opacity:0.4;transform:scale(0.95);}50%{opacity:1;transform:scale(1);}100%{opacity:0.4;transform:scale(0.95);}}.target{animation:breathe3sease-in-outinfinite;}其中，animation屬性依次為動(dòng)畫名、持續(xù)時(shí)間、緩動(dòng)函數(shù)、循環(huán)次數(shù)（infinite為無(wú)限）。CSS中清除浮動(dòng)的常用方法有哪些？各自的原理是什么？（1）額外標(biāo)簽法：在浮動(dòng)元素后添加空標(biāo)簽（如<divclass="clear"></div>），并設(shè)置clear:both。原理是通過(guò)塊級(jí)元素強(qiáng)制換行，避免后續(xù)內(nèi)容環(huán)繞。缺點(diǎn)是增加無(wú)意義標(biāo)簽，不符合語(yǔ)義化。（2）父元素overflow清除法：給父容器設(shè)置overflow:hidden或overflow:auto（觸發(fā)BFC）。原理是BFC會(huì)包含浮動(dòng)子元素的高度，避免父容器高度塌陷。缺點(diǎn)是overflow:hidden可能隱藏溢出內(nèi)容（需謹(jǐn)慎使用），overflow:auto在內(nèi)容過(guò)多時(shí)會(huì)顯示滾動(dòng)條。（3）偽元素清除法（推薦）：父容器設(shè)置::after偽元素，內(nèi)容為空，display:block，clear:both，并設(shè)置height:0;visibility:hidden。代碼示例：.clearfix::after{content:"";display:block;clear:both;height:0;visibility:hidden;}原理是通過(guò)偽元素模擬額外標(biāo)簽法，避免添加真實(shí)DOM元素，同時(shí)保持結(jié)構(gòu)簡(jiǎn)潔。（4）父元素設(shè)置float：將父容器也設(shè)置為float，觸發(fā)BFC。缺點(diǎn)是父容器會(huì)脫離文檔流，可能影響后續(xù)布局。CSS媒體查詢（MediaQuery）的常見(jiàn)使用場(chǎng)景和語(yǔ)法結(jié)構(gòu)是什么？如何針對(duì)不同設(shè)備優(yōu)化樣式？媒體查詢用于根據(jù)設(shè)備特性（如屏幕寬度、高度、分辨率、設(shè)備方向）應(yīng)用不同樣式，常見(jiàn)場(chǎng)景包括響應(yīng)式布局（手機(jī)/平板/PC適配）、打印樣式（@mediaprint）、高分辨率屏幕（Retina）的圖片適配。語(yǔ)法結(jié)構(gòu)為@media[媒體類型][條件表達(dá)式]{樣式規(guī)則}。媒體類型包括all（默認(rèn)）、screen（屏幕）、print（打?。?、speech（語(yǔ)音合成）等。條件表達(dá)式使用min/max前綴，如(min-width:768px)表示屏幕寬度≥768px，(max-width:1024px)表示≤1024px，(orientation:portrait)表示豎屏（高度≥寬度）。優(yōu)化示例：/手機(jī)/@media(max-width:767px){.container{padding:10px;}.nav{display:none;}}/平板/@media(min-width:768px)and(max-width:1023px){.container{width:90%;margin:0auto;}}/PC/@media(min-width:1024px){.container{width:1200px;}}/高分辨率屏幕/@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.logo{background-image:url(logo@2x.png);background-size:100%;}}CSS中display、visibility、opacity的區(qū)別是什么？哪些會(huì)觸發(fā)重排或重繪？display控制元素是否顯示并占據(jù)空間，取值none時(shí)元素完全隱藏且不占據(jù)布局空間（觸發(fā)重排），block/inline等顯示時(shí)重新占據(jù)空間。visibility控制元素是否可見(jiàn)，取值hidden時(shí)元素隱藏但仍占據(jù)空間（觸發(fā)重繪，不觸發(fā)重排），visible時(shí)顯示。opacity控制元素透明度，取值0時(shí)元素透明但仍可交互（如點(diǎn)擊事件）且占據(jù)空間（觸發(fā)重繪），1時(shí)完全不透明。觸發(fā)重排的情況：display:none→display:block（布局變化）；觸發(fā)重繪的情況：visibility:hidden?visible（外觀變化）、opacity:0?1（顏色變化）；不觸發(fā)重排重繪的情況：修改opacity但值不為0或1（如從0.5到0.6，部分瀏覽器可能優(yōu)化為合成層處理）。CSS中偽類（Pseudo-class）與偽元素（Pseudo-element）的區(qū)別是什么？常見(jiàn)的有哪些？偽類用于選擇處于特定狀態(tài)的元素（如用戶交互、結(jié)構(gòu)位置），語(yǔ)法為:偽類名；偽元素用于選擇元素的特定部分（如內(nèi)容的前/后、首字母），語(yǔ)法為::偽元素名（部分舊瀏覽器支持:）。常見(jiàn)偽類：:hover（鼠標(biāo)懸停）、:active（激活狀態(tài)）、:focus（獲得焦點(diǎn)）、:nth-child(n)（第n個(gè)子元素）、:nth-of-type(n)（同類型第n個(gè)子元素）、:first-child（第一個(gè)子元素）、:last-child（最后一個(gè)子元素）、:not(selector)（排除選擇器匹配的元素）、:checked（選中的表單元素）、:disabled（禁用的表單元素）。常見(jiàn)偽元素：::before（元素內(nèi)容前插入）、::after（元素內(nèi)容后插入）、::first-letter（首字母）、::first-line（首行）、::selection（選中的文本）、::placeholder（輸入框占位符）。區(qū)別：偽類是元素的狀態(tài)或位置，不提供新元素；偽元素提供虛擬的“子元素”（如::before/::after可通過(guò)content添加內(nèi)容），會(huì)影響布局。如何實(shí)現(xiàn)CSS三角形？其原理是什么？通過(guò)設(shè)置元素的border屬性，利用border的透明部分和色塊部分形成三角形。原理是瀏覽器繪制border時(shí)，相鄰邊框的交界處為斜線，當(dāng)元素寬高為0時(shí)，僅保留需要方向的border顏色，其他border設(shè)為透明。例如，向上三角形：.triangle-up{width:0;height:0;border-left:5pxsolidtransparent;border-right:5pxsolidtransparent;border-bottom:10pxsolidred;}此時(shí)，左右border的透明部分形成兩側(cè)斜邊，下border的紅色部分為三角形底邊，最終呈現(xiàn)向上的紅色三角形。類似地，調(diào)整border方向（top/bottom/left/right）和顏色可得到不同方向的三角形。CSS中l(wèi)ine-height與height的關(guān)系是什么？如何實(shí)現(xiàn)單行文本垂直居中？line-height是行高（文本行基線間的垂直距離），height是元素的高度。對(duì)于塊級(jí)元素，若height等于line-height，且元素?zé)opadding/border，則單行文本垂直居中（基線位于元素中心）。若元素有padding，需計(jì)算總高度（height+padding-top+padding-bottom）等于line-height。例如，元素height:40px，padding:010px，則總高度為40+102=60px，設(shè)置line-height:60px可實(shí)現(xiàn)垂直居中。對(duì)于行內(nèi)元素（如span），line-height直接決定行高，不影響元素高度（行內(nèi)元素高度由line-height和字體大小共同決定）。單行文本垂直居中的通用方法：設(shè)置元素height等于line-height，且vertical-align:middle（針對(duì)行內(nèi)塊級(jí)元素）。例如：.container{height:40px;line-height:40px;}.text{vertical-align:middle;}CSS中filter與mix-blend-mode的區(qū)別是什么？各舉一個(gè)應(yīng)用場(chǎng)景。filter用于對(duì)元素本身應(yīng)用視覺(jué)效果（如模糊、顏色調(diào)整），作用于元素的整個(gè)渲染結(jié)果（包括內(nèi)容、背景、邊框）；mix-blend-mode用于設(shè)置元素與其父元素或背景的混合模式（如正片疊底、疊加），影響元素與下層內(nèi)容的融合方式。應(yīng)用場(chǎng)景示例：filter：使用filter:blur(5px)實(shí)現(xiàn)毛玻璃效果（需結(jié)合backdrop-filter增強(qiáng)，但backdrop-filter兼容性較差）；使用filter:grayscale(100%)將圖片轉(zhuǎn)為黑白。mix-blend-mode：在圖片上疊加文字，設(shè)置mix-blend-mode:overlay使文字與圖片顏色疊加，增強(qiáng)可讀性；或在按鈕懸停時(shí)，設(shè)置mix-blend-mode:multiply使背景色與原圖混合。CSS中如何實(shí)現(xiàn)文字溢出省略（單行、多行）？需要注意哪些問(wèn)題？單行溢出省略：設(shè)置ov