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

CSS3高频面试题及实战答案

一、基础核心类

CSS3新增了哪些核心特性？请举例说明用途

答案：核心新增特性及用途如下：

选择器：如nth-child(2n)（选中偶数元素）、:not(.active)（排除指定类元素），简化DOM元素定位，减少JS依赖；

盒模型：box-sizing:border-box，让元素宽高包含边框和内边距，解决布局计算繁琐问题；

边框与背景：border-radius（圆角）、box-shadow（阴影）、background-size:cover（背景自适应），无需图片实现美化效果；

动画：transition（过渡动画）、animation（关键帧动画），实现元素状态变化的平滑效果；

弹性布局：flex，快速实现响应式布局，解决垂直居中、自适应排列等经典问题；

媒体查询：@media，根据屏幕尺寸切换样式，适配移动端和PC端。

box-sizing的两个值有什么区别？实际开发中常用哪个？

答案：

content-box（默认值）：元素宽高=内容区宽度/高度，边框和内边距会向外扩展，导致元素实际占用空间变大；

border-box：元素宽高=内容区+边框+内边距，边框和内边距不会超出设定的宽高，布局更可控；

实际开发中优先使用border-box，尤其在表单、卡片布局中，能避免因内边距/边框导致的布局错乱。

二、布局相关类

Flex布局中，flex:1代表什么意思？flex属性的三个值分别对应什么？

答案：

flex:1是简写形式，等价于flex:110%，表示：

元素会自动分配剩余空间，占满父容器的可用宽度/高度；

允许缩小（flex-shrink:1），当空间不足时会缩小；

初始宽度为0%（flex-basis:0%），不占用默认空间；

flex属性的三个值依次是：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（初始尺寸）。

Grid布局和Flex布局的核心区别是什么？分别适用什么场景？

答案：

核心区别：Flex是一维布局（只能沿行或列排列），Grid是二维布局（同时控制行和列）；

适用场景：

Flex：适合组件内部的元素排列（如导航栏、按钮组、卡片内容居中）、简单的响应式布局（如一行多列自适应）；

Grid：适合整体页面布局（如头部、侧边栏、内容区、底部的网格划分）、复杂的多列多行布局（如不规则卡片网格）。

如何实现元素的水平垂直居中？至少说出3种方法

答案：

Flex布局法（最常用）：父元素设置display:flex;justify-content:center;align-items:center;，无需知道子元素尺寸；

定位+transform法：子元素设置position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);，父元素需设position:relative;，适合子元素尺寸不固定的情况；

Grid布局法：父元素设置display:grid;place-items:center;，简洁高效，兼容现代浏览器；

表格法：父元素设display:table;，子元素设display:table-cell;vertical-align:middle;text-align:center;，兼容旧浏览器。

三、动画与过渡类

transition和animation的区别是什么？分别怎么使用？

答案：

区别：

transition：过渡动画，需要触发条件（如hover、click、状态变化），只能实现“从A到B”的线性变化，无法定义中间关键帧；

animation：关键帧动画，无需触发条件（可自动执行），可通过@keyframes定义多个关键帧，实现复杂动画（如循环、暂停、反向）；

使用示例：

transition：div{transition:all0.3sease;}div:hover{transform:scale(1.1);}（hover时放大1.1倍，过渡0.3秒）；

animation：@keyframesfadeIn{0%{opacity:0;}100%{opacity:1;}}div{animation:fadeIn1seaseforwards;}（页面加载时淡入，持续1秒）。

transform的常用属性有哪些？translate和position:relative的left/top有什么区别？