CSS高频面试题及详细答案（实战向）

CSS高频面试题及详细答案（实战向）一、CSS基础概念题1.谈谈你对CSS层叠上下文的理解？层叠顺序规则是什么？答案：层叠上下文是网页中元素在Z轴方向的层级空间，简单说就是元素堆叠的“独立层级容器”。当一个元素形成层叠上下文后，它内部的所有子元素的层级堆叠，只会在这个容器内生效，不会穿透到外层页面。形成层叠上下文的常见条件：页面根元素html（默认自带层叠上下文）position为relative/absolute，且z-index不为autoposition为fixed/sticky（自带层叠上下文）opacity小于1transform、filter、will-change等属性开启标准层叠顺序（从低到高）：背景和边框<负z-index元素<普通文档流元素<浮动元素<行内元素<定位元素（z-index:auto/0）<正z-index元素核心要点：z-index只对定位元素生效，且必须在同一个层叠上下文内对比才有效，父元素层级低，子元素z-index再高也会被外层元素覆盖。2.CSS选择器优先级权重规则是什么？如何计算？答案：CSS优先级是用来判定哪个样式最终生效的规则，采用四位权重计数法，从高到低依次对比，高位胜出则直接生效，无需对比低位。权重等级（从高到低）：!important：最高优先级，无权重，直接覆盖所有样式（日常开发不推荐滥用）行内样式（style）：1,0,0,0ID选择器：0,1,0,0类、伪类、属性选择器：0,0,1,0标签、伪元素选择器：0,0,0,1通配符*、继承样式：0,0,0,0（优先级最低）补充规则：权重只能叠加，不会进位；权重相同时，后写的样式覆盖先写的；样式继承的优先级永远低于手动设置的任何样式。3.什么是CSS继承？哪些属性可以继承，哪些不可以？答案：CSS继承指子元素会自动继承父元素的部分样式属性，无需重复书写，是默认的样式传递机制。可继承属性（高频）：文本类：font-size、font-family、font-weight、color、line-height、text-align、text-indent布局类：visibility、cursor、opacity不可继承属性（高频）：盒模型：width、height、margin、padding、border、background定位：position、top/left/right/bottom、z-index布局：float、display、overflow手动控制继承：inherit（强制继承父样式）、initial（恢复默认样式）、unset（自动判断继承/默认）二、布局核心面试题（重中之重）1.标准文档流是什么？脱离文档流的方式有哪些？区别是什么？答案：标准文档流是浏览器默认的元素排列规则：块级元素自上而下垂直排列，行内元素自左向右水平排列，元素默认占据文档位置，互相不重叠。脱离文档流的三种方式及区别：float浮动：元素脱离普通文档流，但不脱离文本流，文字会环绕浮动元素；浮动元素会造成父级高度塌陷，需要清除浮动。absolute绝对定位：完全脱离文档流，不占据页面空间，不会影响其他元素排列；相对于最近的已定位父级元素定位，无已定位父级则相对于浏览器窗口。fixed固定定位：完全脱离文档流，相对于浏览器视口定位，页面滚动时元素位置固定，常用于导航、返回顶部按钮。2.什么是高度塌陷？如何清除浮动？（必考）答案：塌陷原因：父元素未设置固定高度，子元素全部设置浮动后，子元素脱离文档流，无法撑起父元素高度，导致父元素高度为0，页面布局错乱。四种常用清除浮动方法（从劣到优）：给父元素设置固定高度：简单死板，无法适配动态内容，项目基本不用结尾空div+clear:both：在父元素最后添加空标签，设置clear:both；缺点是增加冗余DOM节点父元素开启BFC：overflow:hidden/auto；优点：代码简洁，无冗余；缺点：超出元素会被隐藏万能伪类清除法（项目常用）：给父元素添加clearfix类PlainText

.clearfix::after{

content:'';

display:block;

clear:both;

height:0;

visibility:hidden;

}

.clearfix{

zoom:1;/*兼容低版本IE*/

}3.谈谈BFC是什么？触发条件和应用场景答案：BFC（块级格式化上下文）是浏览器的独立渲染区域，是一个隔离的独立布局容器，容器内部的元素布局不会影响外部，外部也不会影响内部。触发BFC的条件：根元素htmloverflow不为visible（hidden/auto/scroll）float不为noneposition为absolute/fixeddisplay为inline-block、flex、grid、table-cellBFC核心应用场景：解决浮动导致的父元素高度塌陷解决上下元素margin外边距合并问题（两个块级元素上下margin重叠，取最大值）实现自适应两栏、三栏布局阻止元素被浮动元素覆盖4.Flex布局常用属性及实战用法答案：Flex是弹性布局，一维布局方案，适配移动端和自适应布局，兼容性良好，目前项目主流布局方式。分为容器属性和子项属性。容器常用属性（父元素）：display:flex：开启弹性布局flex-direction：主轴方向（row横向/column纵向）justify-content：主轴对齐（center居中/space-between两端对齐/space-around均分）align-items：侧轴对齐（center居中/stretch拉伸）flex-wrap：是否换行（wrap自动换行/nowrap不换行）子项常用属性（子元素）：flex-grow：放大比例，默认0（剩余空间是否分配）flex-shrink：缩小比例，默认1（空间不足是否缩小）flex-basis：元素基础尺寸，优先级高于widthflex：简写属性，flex:1代表均分剩余空间align-self：单独设置子项侧轴对齐方式5.Grid布局的优势？和Flex布局的区别答案：Grid是二维网格布局，同时控制行和列，是目前最强大的CSS布局方案，适合整体页面规整布局。Flex与Grid核心区别：Flex是一维布局，只能控制单行或单列，适合局部组件布局（导航、卡片排列）Grid是二维布局，同时控制行列，适合整体页面骨架、规整网格布局Flex依赖内容自适应，Grid可以精准定义行列尺寸、间距、区域Grid常用核心属性：display:grid、grid-template-columns/rows（定义行列）、gap（间距）、grid-area（区域布局）三、CSS经典布局实现题1.如何实现水平垂直居中？写出3种常用方法答案：方法一：Flex布局（最简单、项目首选）PlainText

.parent{

display:flex;

justify-content:center;/*水平居中*/

align-items:center;/*垂直居中*/

}方法二：绝对定位+transform（适配不定宽高元素）PlainText

.parent{position:relative;}

.child{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}方法三：绝对定位+四边0+margin:auto（适配定宽高元素）PlainText

.parent{position:relative;}

.child{

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

width:200px;

height:200px;

}2.实现两栏自适应布局（左固定、右自适应）答案：三种主流方案方案1：Flex布局（最简）PlainText

.wrap{display:flex;}

.left{width:200px;}

.right{flex:1;}方案2：浮动+BFCPlainText

.left{float:left;width:200px;}

.right{overflow:hidden;/*触发BFC自适应*/}方案3：Grid布局PlainText

.wrap{display:grid;grid-template-columns:200px1fr;}四、CSS进阶与性能、兼容问题1.CSS3动画transition、transform、animation的区别答案：transform（变形）：纯样式属性，负责元素形态变化（平移、缩放、旋转、倾斜），本身无动画效果，只是改变元素状态transition（过渡）：简单动画，需要触发条件（hover、点击、类名切换），只能实现状态A到状态B的一次性过渡，无关键帧animation（动画）：复杂动画，支持关键帧@keyframes，可设置循环、延时、速度曲线、暂停，无需触发即可自动执行，支持多段状态变化2.什么是CSS硬件加速？优缺点答案：浏览器默认用CPU渲染页面，开启硬件加速后，会交由GPU渲染元素，transform、opacity属性会自动触发硬件加速。优点：动画流畅、减少卡顿、提升页面渲染性能缺点：过度使用会导致GPU内存占用过高、页面闪烁、字体模糊，低端设备容易出现性能问题最佳实践：只给需要动画的元素开启，不全局滥用3.CSS重排和重绘的区别？如何优化？答案：重排（回流）：元素几何尺寸、位置发生变化（宽高、边距、定位、字体大小），浏览器重新计算页面布局，开销极大重绘：元素样式颜色变化（颜色、背景、阴影），不改变布局，只重新绘制像素，开销较小关系：重排一定会触发重绘，重绘不会触发重排优化方案：批量修改样式，不要逐行修改DOM样式，可提前写好class统一切换动画元素脱离文档流，使用fixed/absolute定位优先使用transform、opacity做动画，只触发重绘，不触发重排避免频繁读取DOM布局属性（offsetWidth、scrollTop），减少浏览器强制同步布局4.移动端1px边框问题产生原因及解决方案答案：原因：移动端设备有设备像素比（DPR），高清屏1个CSS像素对应2个/3个物理像素，直接设置border:1px会显示变粗。常用解决方案（项目主流）：伪类+transform缩放PlainText

.border-1px{position:relative;}

.border-1px::after{

content:'';

position:absolute;

left:0;

bottom:0;

width:100%;

height:1px;

background:#eee;

transform:scaleY(0.5);

transform-origin:0bottom;

}五、高频冷门实操题1.display:none和visibility:hidden、opacity:0的区别答案：display:none：完全隐藏元素，不占据页面空间，无法触发事件，会触发重排重绘，过渡动画无效visibility:hidden：隐藏元素，保留页面空间，无法触发事件，只会触发重绘，支持过渡动画opacity:0：透明隐藏，保留空间、可触