css面试题目及答案

css面试题目及答案CSS选择器的优先级是如何计算的？请举例说明不同选择器组合时的优先级顺序。CSS选择器的优先级由四个层级的数值决定，从高到低依次是：内联样式（InlineStyle）、ID选择器（IDSelectors）、类/属性/伪类选择器（Class/Attribute/Pseudo-classSelectors）、类型/伪元素选择器（Type/Pseudo-elementSelectors）。计算时采用“计数法”，不进行进位，具体规则为：-内联样式：优先级最高，计为1,0,0,0（表示1个内联样式，0个ID，0个类，0个类型）。-ID选择器：每个ID计为0,1,0,0。-类/属性/伪类：每个计为0,0,1,0（如.class、[type="text"]、:hover）。-类型/伪元素：每个计为0,0,0,1（如div、p、::before）。当多个选择器作用于同一元素时，优先级数值大的覆盖小的。若优先级完全相同，后定义的样式生效。示例1：```cssbox.contentp{/0,1,1,1/}.boxcontentp{/0,1,1,1/}```两者ID数量（1个）、类数量（1个）、类型数量（1个）相同，优先级相等，后定义的样式会覆盖先定义的。示例2：```cssdiv.nava:hover{/0,0,2,1（类.nav+伪类:hover+类型a+类型div？不，实际是类型div（1）、类.nav（1）、类型a（1）、伪类:hover（1），正确计数应为0,0,2,2？需修正：选择器分解为div（类型，+1）、.nav（类，+1）、a（类型，+1）、:hover（伪类，+1），所以总计数是0,0,2,2（类和伪类各1，类型两个）。而另一个选择器如a.b::after，ID选择器a（+1），类.b（+1），伪元素::after（+1），计数为0,1,1,1。此时后者优先级更高（ID数量1>前者的0）。标准盒模型与IE盒模型（怪异盒模型）的区别是什么？如何通过CSS属性切换两者？两者的核心区别在于元素总宽度/高度的计算方式：-标准盒模型（content-box）：元素的width/height仅包含内容区域（content），边框（border）、内边距（padding）和外边距（margin）会额外增加元素的总尺寸。例如，设置width:200px、padding:10px、border:2px，则元素实际占据的宽度为200px+10px2+2px2=224px。-怪异盒模型（border-box）：元素的width/height包含内容区域（content）、内边距（padding）和边框（border），外边距（margin）仍单独计算。上述示例中，width:200px时，内容区域的宽度为200px-10px2-2px2=176px，元素实际占据的宽度仍为200px（不包含margin）。通过box-sizing属性切换：默认值为content-box（标准盒模型），设置box-sizing:border-box则切换为怪异盒模型。BFC（块格式化上下文）的触发条件和作用是什么？请列举至少3种触发BFC的方式。BFC（BlockFormattingContext）是Web页面中CSS视觉渲染的一个区域，块级盒子在该区域内按照一定规则布局。触发条件包括：-根元素（html）；-浮动元素（float值不为none）；-绝对定位或固定定位的元素（position:absolute/fixed）；-display为inline-block、table-cell、table-caption、flex、grid的元素；-overflow值不为visible的元素（如overflow:auto/hidden/scroll）。BFC的核心作用：1.避免边距折叠：在普通文档流中，相邻的块级元素上下margin会发生折叠（取较大值），但属于不同BFC的元素不会折叠。例如，父元素触发BFC后，其子元素的margin不会与父元素外部的margin折叠。2.清除浮动影响：BFC区域会包含内部的浮动元素，解决父容器高度塌陷问题。例如，父元素设置overflow:hidden触发BFC后，其高度会包含浮动子元素的高度。3.防止元素被浮动元素覆盖：BFC元素与浮动元素相邻时，会尽可能缩小自身内容区域以避开浮动元素，常用于实现“文字环绕”效果（如左侧浮动图片，右侧内容触发BFC后自动环绕）。示例触发方式：```css.container{overflow:hidden;}/方式1/.aside{float:left;}/方式2/.main{display:inline-block;}/方式3/```Flex布局中align-items和align-self的区别是什么？如何让一个子元素在交叉轴上的对齐方式覆盖父容器的align-items设置？align-items定义Flex容器在交叉轴（垂直于主轴的方向）上对所有子元素的默认对齐方式，作用于所有子项；align-self则定义单个子元素在交叉轴上的对齐方式，会覆盖父容器的align-items设置。常见的对齐值包括：flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、stretch（拉伸填充，默认值，子元素未设置高度时占满容器）、baseline（基线对齐）。若要让某个子元素覆盖父容器的align-items，只需为该子元素设置align-self属性。例如：```css.flex-container{display:flex;align-items:center;/所有子元素默认居中/}.special-item{align-self:flex-end;/该子元素单独终点对齐/}```CSS中实现水平垂直居中的方法有哪些？分别说明适用场景。1.定位+transform（推荐现代浏览器）：适用于元素宽高未知的场景。```css.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}```2.Flex布局（推荐现代布局）：适用于容器和子元素均为块级的场景，兼容性需考虑IE10+。```css.parent{display:flex;justify-content:center;/主轴水平居中/align-items:center;/交叉轴垂直居中/}```3.Grid布局（二维布局）：适用于需要更复杂网格的场景，兼容性IE11部分支持。```css.parent{display:grid;place-items:center;/等价于justify-items和align-items均为center/}```4.行内元素+line-height（仅适用于单行文本）：适用于子元素为行内或行内块级，且高度固定的场景。```css.parent{height:200px;line-height:200px;text-align:center;/水平居中/}.child{display:inline-block;vertical-align:middle;}```5.定位+margin自动（需已知宽高）：适用于子元素宽高固定的场景。```css.parent{position:relative;}.child{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;/上下左右自动分配剩余空间/width:100px;height:50px;}```CSS动画中transition和animation的区别是什么？如何实现一个无限循环、延迟2秒开始、持续3秒的淡入淡出动画？transition（过渡）和animation（动画）的核心区别：-触发方式：transition需要事件（如:hover、js触发）或属性变化触发；animation可自动运行，无需外部触发。-控制复杂度：transition只能定义开始和结束两个状态；animation通过@keyframe定义多个中间状态（如0%、50%、100%），支持更复杂的动画序列。-循环与延迟：transition不支持循环（需配合js重复触发），animation支持loop次数和延迟设置。实现无限循环、延迟2秒、持续3秒的淡入淡出动画：```css/定义动画关键帧/@keyframesfade{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}/应用动画/.element{animation:fade3sease-in-out2sinfinite;/参数解释：动画名持续时间过渡函数延迟时间循环次数（infinite为无限）/}```CSS中rem和em的区别是什么？如何基于视口实现响应式字体大小？rem（RootEM）相对于根元素（html）的字体大小计算，em相对于父元素的字体大小计算（若自身未设置字体大小，则继承父元素；若自身设置了字体大小，则基于自身）。示例：若html的font-size为16px（默认值），则1rem=16px；若父元素font-size为20px，子元素设置font-size:1.5em，则子元素字体为30px（20px1.5）。基于视口实现响应式字体大小，可使用vw（视口宽度的1%）或vh（视口高度的1%）单位。例如，设置h1的字体大小为2vw，意味着字体大小始终为视口宽度的2%，视口变宽时字体自动放大，变窄时缩小。为避免极端情况（如手机竖屏时字体过小），可结合min()/max()函数或媒体查询限制范围：```cssh1{font-size:max(16px,2vw);/最小16px，否则取2vw/}```CSS性能优化的常见策略有哪些？为什么说“避免使用通配符选择器”能提升性能？常见优化策略：1.减少重排（Reflow）和重绘（Repaint）：-重排：元素的几何属性（位置、尺寸）改变时触发，需要重新计算布局，成本较高。-重绘：元素的外观（颜色、背景）改变但不影响布局时触发，成本低于重排。优化方法：批量修改样式（使用class一次性添加）、避免频繁操作DOM（使用文档片段或离线修改）、将动画元素设置为fixed/absolute定位（脱离文档流）、使用transform/opacity属性（触发GPU加速）。2.简化选择器复杂度：CSS引擎从右向左匹配选择器，复杂的选择器（如多层嵌套、通配符）会增加匹配时间。例如，`.containerdivullia`需从a开始逐级向上匹配，效率低于`.nav-link`（直接类选择器）。3.减少CSS文件体积：压缩CSS（移除注释、空格）、使用CSS预处理器（如Sass）的变量和混合宏减少重复代码、按需加载CSS（如首屏关键CSS内联，非关键CSS异步加载）。4.避免使用@important：覆盖优先级规则，增加样式调试难度，可能导致后续样式无法覆盖。通配符选择器（）会匹配页面中所有元素，当页面元素数量庞大时，引擎需要遍历所有节点，导致匹配时间显著增加。例如，`{margin:0;padding:0;}`会为每个元素应用样式，远不如`body,div,p,ul,li`等具体选择器高效。如何理解CSS的层叠上下文（StackingContext）？哪些属性会触发层叠上下文？层叠顺序是怎样的？层叠上下文是HTML元素的三维概念，决定了元素在Z轴（垂直屏幕方向）上的显示顺序。每个层叠上下文独立，内部元素的层叠顺序仅在上下文内比较。触发层叠上下文的常见属性：-根元素（html）；-position为absolute/fixed（或relative且z-index不为auto）；-flex/grid容器的子元素（z-index不为auto）；-opacity值小于1的元素；-transform、filter、clip-path、mask等属性不为none的元素；-will-change指定任意属性（如will-change:transform）。层叠顺序（从下到上）：1.层叠上下文的背景和边框；2.负z-index的子层叠上下文；3.块级元素（display:block）；4.浮动元素（display:float）；5.行内/行内块元素（display:inline/inline-block）；6.z-index为auto或0的子层叠上下文；7.正z-index的子层叠上下文。示例：两个position:relative的元素，A的z-index:1，B的z-index:2，则B会覆盖A；若A是B的父元素且触发了层叠上下文，即使B的z-index更大，也会被限制在A的层叠上下文中，整体显示顺序由A的z-index决定。CSS中如何实现一个三角形？其原理是什么？通过设置元素的border属性并隐藏内容区域实现。原理是利用CSS边框（border）的三角形特性：当元素宽度和高度为0时，相邻边框会形成三角形。实现一个向上的红色三角形：```css.triangle{width:0;height:0;border-width:010px10px10px;/上、右、下、左边框宽度/border-style:solid;border-color:transparenttransparentredtransparent;/上、右、下、左边框颜色/}```解释：-width和height设为0，元素仅由边框构成。-上边框宽度为0，左右边框宽度为10px，下边框宽度为10px，形成底边为20px（左右边框各10px）、高为10px的三角形。-上、右、左边框颜色设为transparent（透明），仅下边框为红色，最终显示为向上的红色三角形。类似地，调整border-width和border-color的方向可实现其他方向的三角形（如向左、向右、向下）。CSS变量（自定义属性）的作用域是怎样的？如何通过JavaScript动态修改CSS变量？CSS变量通过--前缀定义，作用域由所在的选择器决定：-在:root选择器中定义的变量为全局变量，可在任意子元素中继承使用；-在特定类或元素中定义的变量为局部变量，仅在该选择器及其子元素中有效（除非被覆盖）。示例：```css:root{--main-color:ff0000;}/全局变量/.container{--box-padding:20px;}/局部变量，仅在.container及其子元素中生效/```通过JavaScript动态修改CSS变量的步骤：1.获取目标元素（通常是根元素或包含变量的元素）；2.使用style.setProperty方法修改变量值。示例：```javascript//修改全局变量document.documentElement.style.setProperty('--main-color','00ff00');//修改局部变量（假设.container元素存在）constcontainer=document.querySelector('.container');container.style.setProperty('--box-padding','30px');```修改后，所有使用该变量的CSS规则会自动更新样式（无需刷新页面）。CSS中mix-blend-mode和background-blend-mode的区别是什么？举例说明它们的应用场景。mix-blend-mode定义元素内容与其父元素内容、背景的混合模式；background-blend-mode定义元素背景图与背景色之间的混合模式。mix-blend-mode的作用对象是元素的整个内容（包括前景和背景），混合的是当前元素与下层元素（父元素或更底层元素）的内容；background-blend-mode仅作用于当前元素的背景层（背景图和背景色），不影响元素的前景内容（如文字、子元素）。应用场景示例：-mix-blend-mode：实现文字与背景图的混合效果（如文字穿透背景图显示底层内容）。```css.text{mix-blend-mode:screen;/滤色模式，文字与底层背景混合/}```-background-blend-mode：为背景图叠加颜色滤镜（如给图片添加半透明遮罩）。```css.box{background-image:url('bg.jpg');background-color:rgba(255,0,0,0.5);background-blend-mode:multiply;/正片叠底，颜色与图片混合/}```CSS中sticky定位的工作原理是什么？使用时需要注意哪些限制？sticky定位（position:sticky）是相对定位（relative）和固定定位（fixed）的混合模式，元素在跨越特定阈值前表现为relative，超过阈值后表现为fixed。工作原理：元素根据最近的滚动祖先（overflow不为visible的元素）和视口（viewport）的位置，在“粘性位置”（通过top/bottom/left/right定义）处固定。例如，设置top:20px的元素，当滚动到距离视口顶部20px时会固定，不再随滚动条移动；当父元素滚动出视口时，元素会随父元素一起消失。使用限制：1.需设置top/bottom/left/right中的至少一个属性，否则等同于relative；2.父元素不能设置overflow:hidden/auto/scroll，否则sticky定位会失效（父元素成为滚动容器，元素无法超出其边界）；3.元素自身不能是浮动（float）或绝对定位（absolute/fixed）；4.根元素（html）的高度需大于视口高度，否则可能无法触发粘性效果；5.在部分旧版浏览器（如IE）中不支持，需添加前缀（如-webkit-sticky）。示例：```css.nav{position:sticky;top:0;/滚动到视口顶部时固定/background:white;}```如何用CSS实现多列等高布局？Flex和Grid方案有何不同？多列等高布局指多个列在内容不同时，高度保持一致。常见实现方案：1.Flex布局（一维布局）：父容器设置display:flex，子列默认高度会拉伸至父容器高度（align-items默认值为stretch）。```css.row{display:flex;}.col{flex:1;}/各列等宽，高度自动等高/```2.Grid布局（二维布局）：父容器设置display:grid，子列所在的行自动拉伸，高度由最高列决定。```css.grid-container{display:grid;grid-template-columns:repeat(3,1fr);/3列等宽/}```Flex与Grid的区别：-维度控制：Flex是一维布局（主轴为行或列），适合单行/单列的排列；Grid是二维布局，可同时控制行和列的排列。-等高实现：Flex通过align-items:stretch（默认）自动拉伸子元素高度；Grid中所有单元格（子元素）在同一行时，高度由该行的最大高度决定，无需额外设置。-兼容性：Flex支持更早（IE10+），Grid在IE11中部分支持（需-ms-前缀）。CSS中如何解决图片底部留白的问题？其根本原因是什么？图片底部留白（间隙）常见于行内图片（display:inline），根本原因是行内元素的基线（baseline）对齐规则。行内图片的底部与基线对齐，而基线与行框底部之间存在一定的空白（由字体的line-height决定）。解决方法：1.将图片改为块级元素（display:block）：```cssimg{disp