大厂前端Offer直通车：校招百题斩与高频考点精讲（一）HTML/CSS（20题） -CSDN博客

本文链接：https://blog.csdn.net/yuanwei9467/article/details/146285085

1. 实现垂直水平居中的5种方案

核心方案：

<!-- 方案1：Flex布局（推荐） -->
<div style="display: flex; justify-content: center; align-items: center;">
  <div>内容</div>
</div>

<!-- 方案2：绝对定位+Transform -->
<div style="position: relative; height: 300px;">
  <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">内容</div>
</div>

<!-- 方案3：Grid布局 -->
<div style="display: grid; place-items: center;">内容</div>

<!-- 方案4：Table-Cell -->
<div style="display: table-cell; vertical-align: middle; text-align: center;">
  <div style="display: inline-block;">内容</div>
</div>

<!-- 方案5：绝对定位+负Margin（需已知尺寸） -->
<div style="position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px;">内容</div>

面试要点：

优先掌握Flex/Grid现代方案
理解每种方案的兼容性差异（如Transform在iOS8的兼容问题）
能分析不同场景下的选择策略（如动态尺寸推荐方案2）

2. BFC原理及应用场景

核心原理：

BFC（块级格式化上下文）是独立的渲染区域
触发条件：overflow: hidden、float、position: absolute等
特性：内部垂直排列、阻止外边距合并、隔离浮动元素

应用场景：

/* 清除浮动 */
.clearfix { overflow: hidden; }

/* 防止margin合并 */
.container { overflow: hidden; }

/* 自适应两栏布局 */
.left { float: left; }
.right { overflow: hidden; }

面试陷阱：BFC不是万能药，需结合具体场景分析

3. CSS选择器优先级计算规则

权重计算规则：

内联样式（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 */

4. 移动端1px边框解决方案

物理像素适配方案：

/* 方案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配合） */
<meta name="viewport" content="width=device-width,initial-scale=0.5">

技术选型：根据项目需求选择，注意IOS的hairline特性

5. Flex布局实现九宫格

.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伪元素）

6. Grid布局与Flex布局的区别

特性	Grid	Flex
维度	二维布局	一维布局
对齐方式	容器级控制	项目级控制
适用场景	复杂网格布局	线性排列布局
代码示例	`grid-template-columns: repeat(3, 1fr)`	`flex-direction: row`

7. 清除浮动的原理与方法

原理：

浮动元素脱离文档流，导致父容器高度塌陷

解决方案：

/* 方案1：clearfix（推荐） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 方案2：BFC触发 */
.container { overflow: hidden; }

/* 方案3：空div法 */
<div style="clear: both;"></div>

面试陷阱：overflow: hidden可能造成内容截断

8. CSS动画性能优化技巧

优化策略：

优先使用transform和opacity（不触发重排）
避免频繁触发重排的属性（如width/top）
使用will-change提示浏览器优化
合理使用requestAnimationFrame

代码示例：

.box {
  transform: translateZ(0); /* 开启硬件加速 */
  will-change: transform;
}

9. 伪类与伪元素的区别

特性	伪类（:）	伪元素（::）
作用对象	元素的特定状态	创建虚拟元素
数量限制	可叠加多个	每个选择器只能一个
典型示例	:hover, :nth-child	::before, ::after
内容生成	不能生成内容	可配合content属性

10. 响应式布局实现方案

核心方案：

媒体查询（Media Queries）

@media (max-width: 768px) {
  .container { padding: 10px; }
}

流式布局（百分比/视口单位）

.box { width: 50vw; }

弹性布局（Flex/Grid）
图片响应式

<img srcset="small.jpg 480w, large.jpg 1080w" sizes="(max-width: 600px) 480px, 800px">

11. CSS模块化方案对比

特性	CSS Modules	CSS-in-JS
作用域	局部作用域	动态作用域
动态样式	需预处理器变量	原生支持JS变量
编译方式	构建时处理	运行时生成
典型库	原生支持	styled-components
适用场景	传统项目	React技术栈

12. 重排（Reflow）与重绘（Repaint）优化

优化策略：

避免逐项更改样式（使用classList批量修改）
使用DocumentFragment进行DOM操作
复杂动画使用position: absolute脱离文档流
启用GPU加速（transform: translateZ(0)）

性能影响：

重排成本 > 重绘成本 > 合成层更新

13. 层叠上下文（Stacking Context）形成条件

触发条件：

根元素（HTML）
position: absolute/fixed + z-index非auto
opacity < 1
transform非none
filter非none

层叠规则：

背景和边框
负z-index
块级元素
浮动元素
正z-index

14. 字体图标实现方案

技术对比：

方案	IconFont	SVG Sprite
实现方式	字体文件	SVG符号集合
颜色控制	单色	多色支持
缩放质量	边缘模糊	矢量无损
典型工具	IcoMoon	svg-sprite-loader
代码示例	`<i class="icon-font"></i>`	`<svg><use xlink:href="#icon"></use></svg>`

15. CSS预处理器核心功能

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;

16. 媒体查询（@media）应用场景

典型场景：

设备类型区分

@media screen { ... }
@media print { ... }

响应式断点

@media (min-width: 1200px) { ... }

深色模式适配

@media (prefers-color-scheme: dark) { ... }

高对比度模式

@media (forced-colors: active) { ... }

17. 毛玻璃效果实现

现代方案：

.blur-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

兼容方案：

/* 使用伪元素模拟效果 */
.blur-box::before {
  content: "";
  position: absolute;
  background: inherit;
  filter: blur(10px);
}

18. CSS变量使用场景

典型应用：

主题切换

: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);
}

19. 浏览器默认样式重置方案

方案对比：

方案	Reset.css	Normalize.css
核心理念	清零所有默认样式	保留有用的默认样式
代码体积	较小	稍大
维护状态	不再更新	持续维护
典型处理	`margin: 0;`	修复浏览器差异
推荐场景	定制化程度高的项目	需要跨浏览器一致性的项目

20. CSS Houdini应用前景

核心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开发范式