CSS3高频面试题及实战答案.docx

CSS3高频面试题及实战答案

一、基础特性题（考察核心用法）

border-radius如何实现半圆？

答：给元素设置宽高比为2:1，再让其中一组对角的圆角等于高度（或宽度的一半）。比如：

.half-circle{

width:200px;

height:100px;

border-radius:100px100px00;/*上半圆，下半圆把0和100px互换*/

background:#000;

}

注意：若宽高相等且border-radius设为50%才是正圆，半圆必须控制宽高比例。

flex布局中，如何让子元素垂直水平居中？

答：给父容器设置：

.parent{

display:flex;

justify-content:center;/*水平居中（主轴）*/

align-items:center;/*垂直居中（交叉轴）*/

}

若子元素有多行，可加align-content:center控制行与行之间的垂直间距。

CSS3动画（animation）和过渡（transition）的区别？

答：核心是“是否需要主动触发”和“复杂度”：

transition：需触发（如hover、js改样式），只能从“初始态”到“结束态”，适合简单状态切换（如hover变色、放大）；

animation：无需触发，可定义多帧（@keyframes），支持循环、暂停、反向等，适合复杂动画（如加载动效、元素沿路径移动）。

二、进阶应用题（考察场景落地）

Grid布局和Flex布局的适用场景？

答：用“维度”判断最直观：

Flex：一维布局（一行或一列），比如导航栏（横向排列）、列表项（纵向排列），子元素自动适应剩余空间；

Grid：二维布局（行+列），比如整体页面框架（header+main+aside+footer）、卡片网格（多列多行），能精确控制子元素在行列中的位置，比用float或Flex嵌套更简洁。

如何用CSS3实现渐变背景，且兼容低版本浏览器？

答：用linear-gradient，加浏览器前缀兼容，同时设置纯色背景兜底：

.gradient-bg{

background:#f00;/*兜底色，兼容不支持渐变的浏览器*/

background:-webkit-linear-gradient(left,#f00,#00f);/*Chrome/Safari*/

background:-moz-linear-gradient(left,#f00,#00f);/*Firefox*/

background:linear-gradient(toright,#f00,#00f);/*标准写法，toright等价于90deg*/

}

实际开发中建议用autoprefixer自动加前缀，不用手动写。

transform中的translate和position:relative的区别？

答：关键在“是否影响文档流”和“性能”：

relative：会占据原位置（文档流不释放），移动时可能覆盖其他元素，修改时会触发页面重排（reflow），性能较差；

translate：不占据原位置（文档流释放），移动时不会影响其他元素，由GPU加速，只触发重绘（repaint），性能更好，适合做动画位移。

三、实战痛点题（考察问题解决）

用CSS3实现响应式布局，有哪些常用方案？

答：三种核心方案，根据场景组合用：

媒体查询（@media）：按屏幕宽度断点改样式，比如@media(max-width:768px){.box{width:100%;}}，适合精确控制不同设备样式；

弹性单位：用rem（根元素字体大小）、vw/vh（视口百分比），比如font-size:1rem（配合js动态改html的font-size）、width:50vw（占视口一半宽）；

流动布局：子元素用百分比宽度，配合max-width限制最大宽度，比如img{width:100%;max-width:600px;}，防止图片过大变形。

CSS3动画播放结束后，如何让元素保持在最后一帧状态？

答：给animation加fill-mode:forwards属性，比如：

.move{

animation:move2slinear;

animation-fill-mode:forwards;/*动画结束后停在最后一帧*/

}

@keyframes