核心方案:
内容
内容
内容
内容
内容
面试要点:
优先掌握Flex/Grid现代方案
理解每种方案的兼容性差异(如Transform在iOS8的兼容问题)
能分析不同场景下的选择策略(如动态尺寸推荐方案2)
核心原理:
BFC(块级格式化上下文)是独立的渲染区域
触发条件:overflow: hidden
、float
、position: absolute
等
特性:内部垂直排列、阻止外边距合并、隔离浮动元素
应用场景:
/* 清除浮动 */
.clearfix { overflow: hidden; }
/* 防止margin合并 */
.container { overflow: hidden; }
/* 自适应两栏布局 */
.left { float: left; }
.right { overflow: hidden; }
面试陷阱:BFC不是万能药,需结合具体场景分析
权重计算规则:
内联样式(1000)> ID选择器(100)> 类/伪类/属性(10)> 元素/伪元素(1)
示例:#nav .item:hover
= 100 + 10 + 10 = 120
重要原则:
!important
> 内联样式
相同权重后定义生效
避免过度嵌套(如.header ul li a
)
面试考点:
div#main .item[data-id] > a:hover {...}
/* 权重 = 1(id) + 10(class) + 10(属性) + 1(元素) + 10(伪类) = 132 */
物理像素适配方案:
/* 方案1:伪元素+Transform(推荐) */
.border-1px::after {
content: "";
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #000;
transform: scale(0.5);
transform-origin: 0 0;
}
/* 方案2:Viewport缩放(需JS配合) */
技术选型:根据项目需求选择,注意IOS的hairline特性
.container {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 300px;
}
.item {
flex: 1 0 calc(33.33% - 10px);
height: 90px;
background: #eee;
}
关键技术点:
flex-wrap: wrap
允许换行
gap
属性设置间距(需注意兼容性)
处理最后一行不足问题(可配合::after
伪元素)
特性 | Grid | Flex |
---|---|---|
维度 | 二维布局 | 一维布局 |
对齐方式 | 容器级控制 | 项目级控制 |
适用场景 | 复杂网格布局 | 线性排列布局 |
代码示例 | grid-template-columns: repeat(3, 1fr) |
flex-direction: row |
原理:
浮动元素脱离文档流,导致父容器高度塌陷
解决方案:
/* 方案1:clearfix(推荐) */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 方案2:BFC触发 */
.container { overflow: hidden; }
/* 方案3:空div法 */
面试陷阱:overflow: hidden
可能造成内容截断
优化策略:
优先使用transform
和opacity
(不触发重排)
避免频繁触发重排的属性(如width
/top
)
使用will-change
提示浏览器优化
合理使用requestAnimationFrame
代码示例:
.box {
transform: translateZ(0); /* 开启硬件加速 */
will-change: transform;
}
特性 | 伪类(:) | 伪元素(::) |
---|---|---|
作用对象 | 元素的特定状态 | 创建虚拟元素 |
数量限制 | 可叠加多个 | 每个选择器只能一个 |
典型示例 | :hover, :nth-child | ::before, ::after |
内容生成 | 不能生成内容 | 可配合content属性 |
核心方案:
媒体查询(Media Queries)
@media (max-width: 768px) {
.container { padding: 10px; }
}
流式布局(百分比/视口单位)
.box { width: 50vw; }
弹性布局(Flex/Grid)
图片响应式
特性 | CSS Modules | CSS-in-JS |
---|---|---|
作用域 | 局部作用域 | 动态作用域 |
动态样式 | 需预处理器变量 | 原生支持JS变量 |
编译方式 | 构建时处理 | 运行时生成 |
典型库 | 原生支持 | styled-components |
适用场景 | 传统项目 | React技术栈 |
优化策略:
避免逐项更改样式(使用classList
批量修改)
使用DocumentFragment
进行DOM操作
复杂动画使用position: absolute
脱离文档流
启用GPU加速(transform: translateZ(0)
)
性能影响:
重排成本 > 重绘成本 > 合成层更新
触发条件:
根元素(HTML)
position: absolute/fixed
+ z-index
非auto
opacity
< 1
transform
非none
filter
非none
层叠规则:
背景和边框
负z-index
块级元素
浮动元素
正z-index
技术对比:
方案 | IconFont | SVG Sprite |
---|---|---|
实现方式 | 字体文件 | SVG符号集合 |
颜色控制 | 单色 | 多色支持 |
缩放质量 | 边缘模糊 | 矢量无损 |
典型工具 | IcoMoon | svg-sprite-loader |
代码示例 |
|
|
Sass核心功能:
变量
$primary-color: #1890ff;
嵌套
.container {
.item { color: red; }
}
Mixin
@mixin center {
display: flex;
justify-content: center;
}
继承
%ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
模块化
@use 'variables' as vars;
典型场景:
设备类型区分
@media screen { ... }
@media print { ... }
响应式断点
@media (min-width: 1200px) { ... }
深色模式适配
@media (prefers-color-scheme: dark) { ... }
高对比度模式
@media (forced-colors: active) { ... }
现代方案:
.blur-box {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
兼容方案:
/* 使用伪元素模拟效果 */
.blur-box::before {
content: "";
position: absolute;
background: inherit;
filter: blur(10px);
}
典型应用:
主题切换
:root {
--primary-color: #1890ff;
}
.button {
background: var(--primary-color);
}
动态计算
.box {
margin: calc(var(--base-margin) * 2);
}
媒体查询联动
@media (max-width: 768px) {
:root { --columns: 2; }
}
.grid {
grid-template-columns: repeat(var(--columns), 1fr);
}
方案对比:
方案 | Reset.css | Normalize.css |
---|---|---|
核心理念 | 清零所有默认样式 | 保留有用的默认样式 |
代码体积 | 较小 | 稍大 |
维护状态 | 不再更新 | 持续维护 |
典型处理 | margin: 0; |
修复浏览器差异 |
推荐场景 | 定制化程度高的项目 | 需要跨浏览器一致性的项目 |
核心API:
Paint API:自定义绘制
registerPaint('circle', class {
paint(ctx, size) {
ctx.fillStyle = 'red';
ctx.arc(size.width/2, size.height/2, 50, 0, Math.PI*2);
ctx.fill();
}
});
Layout API:自定义布局
Animation API:自定义动画
现状与趋势:
浏览器支持度约68%(2023年数据)
适合渐进增强型功能开发
可能成为下一代CSS开发范式