第 3 卷

• ::selection：自定义用户选中文字的样式（背景色/文字色）

• ::first-line / ::first-letter：选中文本首行/首字⺟，做特殊样式

✅ 二、布局方式革新（解决传统浮动布局痛点）

CSS3彻底解决了传统 float 浮动布局的高度塌陷、适配困难、布局复杂问题，新增2种核心布局，成为现代前端布局的主流：

• 1. Flex 弹性布局（一维布局：行/列）

• 核心：给父元素设置 display: flex，子元素自动成为弹性项，支持居中、均分、自适应、换

行等

• 核心属性： justify-content（主轴对齐）、 align-items（侧轴对齐）、 flex-

direction（主轴方向）、 flex-wrap（换行）、 flex: 1（子元素占满剩余空间）

• 优势：移动端布局首选，代码极简，适配性极强，无需计算宽度，解决垂直居中难题

• 场景：导航栏、列表布局、卡片均分、表单对齐、页面居中

• 2. Grid 网格布局（二维布局：行+列）

• 核心：给父元素设置 display: grid，将容器划分为行和列的网格，精准控制子元素的行/列占

比

• 核心属性： grid-template-columns（列宽）、 grid-template-rows（行高）、

grid-gap（网格间距）、 grid-area（元素占多行列）

• 优势：复杂布局首选，支持跨行/跨列，精准定位，替代传统表格布局+浮动布局

• 场景：后台管理系统、大屏可视化、商品详情页、不规则布局

• 3. 多列布局（报纸式文本）

• 核心属性： column-count（列数）、 column-gap（列间距）、 column-rule（列分隔

线）

• 场景：长文本资讯页、新闻文章的多列排版

✅ 三、视觉样式增强（无需图片，实现复杂效果）

CSS3新增大量视觉样式，无需依赖PS切图，即可实现圆角、阴影、渐变、透明等效果，提升页面美观度，减少图片请求：

• 1. 边框&背景增强

• ✅ border-radius：圆角边框，支持单角/全角，实现圆形/胶囊形元素（核心常用）

• ✅ box-shadow：盒子阴影，支持多重阴影、模糊/扩散/偏移，实现立体效果

• ✅ border-image：边框图片，替代纯色边框，实现个性化边框

• ✅ 多背景图： background-image 可同时设置多张背景图，用逗号分隔

• ✅ background-size：控制背景图尺寸（ cover 铺满/ contain 完整显示）

• ✅ background-position：精准定位背景图，支持百分比/像素/关键字

• ✅ background-clip：背景裁剪（裁剪到内容区/边框区/内边距区）

• 2. 文本样式增强

• ✅ text-shadow：文本阴影，实现发光/立体文字效果

• ✅ text-overflow：文本溢出处理（ ellipsis 省略号，核心常用），配合 white-

space: nowrap 实现单行省略

• ✅ word-wrap / word-break：文本换行控制，解决长单词/中文换行问题

• ✅ text-align-last：最后一行文本对齐方式

• ✅ @font-face：自定义字体，摆脱系统字体限制，引入第三方字体（如思源字体、阿里普惠

体）

• 3. 其他视觉特性

• ✅ opacity：控制元素整体透明度（0-1），支持过渡/动画

• ✅ filter：滤镜效果，支持 blur(模糊) / grayscale(灰度) / brightness(亮

度) / contrast(对比度) 等

• ✅ backdrop-filter：背景滤镜，给元素背景添加模糊/灰度，不影响内容

• ✅ box-sizing：盒模型切换， border-box（宽高包含边框+内边距，前端首

选）/ content-box（默认，宽高仅含内容）

✅ 四、动画与过渡（无JS实现流畅动效）

CSS3新增原生动画能力，无需依赖JavaScript，即可实现过渡、旋转、缩放、淡入淡出等效果，硬件加速渲染，动画更流畅，大幅提升用户体验：

• 1. transform 变形（2D/3D）

• 2D变形（核心常用）：

translate(x,y)：平移、 rotate(deg)：旋转、 scale(x,y)：缩放、 skew(deg)：倾斜

• 3D变形： translate3d(x,y,z)、 rotate3d(x,y,z,deg)、 scale3d(x,y,z)

• 优势：不影响其他元素布局，硬件加速，无卡顿，支持组合使用（如 transform:

translate(20px) rotate(30deg)）

• 核心：控制元素样式变化的过渡过程，如hover时的颜色、尺寸、位置渐变

• 核心属性： transition: 过渡属性时长缓动函数延迟

• 示例： transition: all 0.3s ease（所有样式变化，0.3秒完成，缓动效果）

• 场景：按钮hover、卡片悬浮、输入框聚焦等简单动效

• 3. @keyframes + animation 关键帧动画（复杂动效）

• 核心：自定义多阶段、循环、可控的复杂动画，支持暂停、延迟、循环次数

• 步骤：① 用 @keyframes 定义动画帧 → ② 用 animation 调用动画

• 核心属性： animation-name（动画名）、 animation-duration（时长）、

animation-iteration-count（循环次数，infinite无限）、 animation-delay（延迟）、 animation-play-state（暂停/播放）

• 场景：加载动画、轮播图动效、页面入场动画、元素跳动/旋转

✅ 五、响应式布局核心特性

• @media 媒体查询（核心）

• 核心：根据屏幕尺寸、设备类型、分辨率，加载不同的CSS样式，实现一套代码适配多设备（PC/

平板/手机）

• 语法： @media (max-width: 750px) { ... }（屏幕宽度≤750px时生效）

• 常用断点：750px（移动端）、992px（平板）、1200px（PC）

• 配合 meta viewport 标签，实现移动端完美适配

✅ 六、其他实用新特性

1. ✅ calc() 计算属性：动态计算CSS值，如 width: calc(100% - 20px)，支持加减乘除
2. ✅ vw/vh 视口单位： 1vw=视口宽度1%， 1vh=视口高度1%，适配不同屏幕尺寸，移动端首

选

1. ✅ min-width/max-width / min-height/max-height：限制元素尺寸范围，提升布局稳

定性

1. ✅ outline：外轮廓，不占布局空间，常用于:focus状态样式，区别于border
2. ✅ resize：允许用户调整元素尺寸（如textarea默认可拖拽）

✅ 面试总结

CSS3的核心价值：告别切图时代、解决布局痛点、实现原生动画、支持响应式，让前端开发从“能