基础概念
- CSS 盒模型是什么？标准盒模型和怪异盒模型的区别？
-
盒模型由 content、padding、border、margin 组成
-
标准盒模型(width=content)
-
怪异盒模型(width=content+padding+border)
- CSS 选择器优先级如何计算？
-
!important > 行内样式 > ID > Class/伪类/属性 > 元素/伪元素 > 通配符
-
权重计算：(a,b,c,d) a=行内, b=ID, c=Class, d=元素
- position 属性的值及其区别？
-
static: 默认
-
relative: 相对自身定位
-
absolute: 相对最近非static父元素
-
fixed: 相对视口
-
sticky: 滚动时固定
布局相关
- 如何实现水平垂直居中？
/* 方法1: flex */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 方法2: grid */
.container {
display: grid;
place-items: center;
}
/* 方法3: transform */
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- Flex 布局常用属性有哪些？
-
容器属性: flex-direction, flex-wrap, justify-content, align-items
-
项目属性: order, flex-grow, flex-shrink, flex-basis
- Grid 布局与 Flex 布局的区别？
-
Flex 是一维布局，Grid 是二维布局
-
Grid 更适合复杂布局结构
-
Flex 更适合组件内部排列
高级特性
- CSS 动画如何实现？
@keyframes example {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: example 2s ease-in-out infinite;
}
- BFC(块级格式化上下文)是什么？如何创建？
-
特性: 内部元素垂直排列，不会影响外部
-
创建方式: overflow非visible, float非none, position非static/relative, display: flex/grid等
- CSS 预处理器(Sass/Less)有什么优势？
-
变量
-
嵌套规则
-
Mixin/函数
-
运算能力
-
模块化
性能优化
-
CSS 性能优化方法有哪些？
-
避免使用@import
-
压缩CSS文件
-
使用CSS精灵图
-
减少重绘回流
-
使用will-change优化动画
-
-
重绘(Repaint)和回流(Reflow)的区别？如何减少？
-
回流: 布局改变(几何属性)
-
重绘: 外观改变(颜色等)
-
减少方法: 避免频繁操作DOM, 使用transform代替top/left
-
响应式设计
-
如何实现响应式布局？
-
媒体查询
-
相对单位(rem/vw)
-
弹性布局(Flex/Grid)
-
图片响应式(max-width: 100%)
-
-
移动端1像素边框问题如何解决？
.border { position: relative; } .border::after { content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1px solid #000; transform: scale(0.5); transform-origin: 0 0; }
CSS3 新特性
-
CSS3 新增了哪些特性？
-
选择器(:nth-child等)
-
阴影(box-shadow/text-shadow)
-
渐变(gradient)
-
过渡(transition)
-
变换(transform)
-
动画(animation)
-
弹性盒模型(flex)
-
网格布局(grid)
-
高级 CSS
深入原理类问题
- 请解释 CSS 渲染层合成(Composite)的工作原理及其优化意义
-
浏览器渲染流程：Layout → Paint → Composite
-
合成层创建条件：transform/opacity/will-change等属性
-
优化意义：减少重绘区域，提高动画性能
- CSS 变量(Custom Properties)的作用域问题及如何实现主题切换？
:root {
--primary-color: #4285f4;
--bg-color: #fff;
}
.dark-theme {
--primary-color: #34a853;
--bg-color: #121212;
}
.element {
color: var(--primary-color);
background: var(--bg-color);
}
- CSS Module 和 CSS-in-JS 的底层实现原理是什么？如何解决样式冲突？
-
CSS Module: 通过哈希类名实现作用域隔离
-
CSS-in-JS: 运行时生成唯一类名或内联样式
-
对比：构建时处理 vs 运行时处理
复杂布局挑战
- 如何实现一个等宽等高且宽高比固定的网格布局？
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 1fr;
}
.grid::before {
content: '';
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.grid > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
- 实现一个三角形箭头，要求不使用 border 方式
.arrow {
width: 0;
height: 0;
background: linear-gradient(to bottom right,
transparent 0%,
transparent 50%,
#000 50%,
#000 100%);
transform: rotate(45deg);
}
性能与优化深入
- 如何诊断和优化 CSS 导致的布局抖动(Layout Thrashing)？
-
原因：强制同步布局(读取→修改→读取)
-
解决方案：
-
使用FastDOM库
-
批量读写操作
-
使用requestAnimationFrame
-
- CSS Containment 属性如何提升渲染性能？
.container {
contain: layout paint style;
}
-
作用：限制浏览器重绘/回流范围
-
适用场景：复杂组件、无限滚动列表
前沿技术
- CSS Houdini 是什么？如何用它实现自定义布局？
-
工作流程：注册属性→定义CSSOM→实现布局绘制
-
示例：实现瀑布流布局
registerLayout('masonry', class {
async layout(children, edges, constraints, styleMap) {
// 自定义布局逻辑
}
});
- CSS Scroll Snap 的实现原理和高级用法
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.item {
scroll-snap-align: start;
}
- 进阶：结合IntersectionObserver实现复杂滚动效果
浏览器机制
-
浏览器如何处理多个@keyframes动画的性能？
-
合成层优化策略
-
硬件加速条件
-
will-change的正确使用方式
-
-
CSS变量与预处理器变量的本质区别是什么？
| 特性 | CSS变量 | 预处理器变量 |
|-----------|--------|--------|
| 作用域 | 运行时 | 编译时 |
| 可动态修改 | 是 | 否 |
| 支持媒体查询 | 是 | 否 |
工程化问题
-
如何设计一个支持Tree Shaking的CSS架构？
-
原子化CSS方案(Tailwind)
-
CSS Module组合策略
-
PostCSS处理流程优化
-
-
BEM命名规范在大型项目中的局限性及改进方案
-
问题：类名过长、维护困难
-
改进：
-
结合CSS Module
-
使用命名空间
-
采用ITCSS分层架构
-
-
视觉算法挑战
-
仅用CSS实现图片的灰度/模糊等滤镜效果
.filter { filter: grayscale(100%) blur(2px) contrast(120%); /* 支持链式调用多个滤镜 */ } -
纯CSS实现自适应宽高的流体排版(类似杂志布局)
.magazine { column-count: auto; column-width: 300px; column-gap: 20px; column-fill: balance; }
这些高级问题往往需要候选人不仅了解CSS语法，还要深入理解浏览器渲染机制、性能优化策略和现代CSS工程化实践。准备时建议结合具体项目经验，展示解决复杂问题的思路和能力。
网友评论