大厂前端Offer直通车:校招百题斩与高频考点精讲(一)HTML/CSS(20题)


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

核心方案



  
内容
  内容
内容
  内容
内容

面试要点


2. BFC原理及应用场景

核心原理

应用场景

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

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

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

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


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

权重计算规则

重要原则

面试考点

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配合) */

技术选型:根据项目需求选择,注意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;
}

关键技术点


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法 */

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


8. CSS动画性能优化技巧

优化策略

  1. 优先使用transformopacity(不触发重排)

  2. 避免频繁触发重排的属性(如width/top

  3. 使用will-change提示浏览器优化

  4. 合理使用requestAnimationFrame

代码示例

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

9. 伪类与伪元素的区别

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

10. 响应式布局实现方案

核心方案

  1. 媒体查询(Media Queries)

@media (max-width: 768px) {
  .container { padding: 10px; }
}
  1. 流式布局(百分比/视口单位)

.box { width: 50vw; }
  1. 弹性布局(Flex/Grid)

  2. 图片响应式



11. CSS模块化方案对比

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

12. 重排(Reflow)与重绘(Repaint)优化

优化策略

  1. 避免逐项更改样式(使用classList批量修改)

  2. 使用DocumentFragment进行DOM操作

  3. 复杂动画使用position: absolute脱离文档流

  4. 启用GPU加速(transform: translateZ(0)

性能影响


13. 层叠上下文(Stacking Context)形成条件

触发条件

  1. 根元素(HTML)

  2. position: absolute/fixed + z-index非auto

  3. opacity < 1

  4. transform非none

  5. filter非none

层叠规则

  1. 背景和边框

  2. 负z-index

  3. 块级元素

  4. 浮动元素

  5. 正z-index


14. 字体图标实现方案

技术对比

方案 IconFont SVG Sprite
实现方式 字体文件 SVG符号集合
颜色控制 单色 多色支持
缩放质量 边缘模糊 矢量无损
典型工具 IcoMoon svg-sprite-loader
代码示例

15. CSS预处理器核心功能

Sass核心功能

  1. 变量

$primary-color: #1890ff;
  1. 嵌套

.container {
  .item { color: red; }
}
  1. Mixin

@mixin center {
  display: flex;
  justify-content: center;
}
  1. 继承

%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
  1. 模块化

@use 'variables' as vars;

16. 媒体查询(@media)应用场景

典型场景

  1. 设备类型区分

@media screen { ... }
@media print { ... }
  1. 响应式断点

@media (min-width: 1200px) { ... }
  1. 深色模式适配

@media (prefers-color-scheme: dark) { ... }
  1. 高对比度模式

@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变量使用场景

典型应用

  1. 主题切换

:root {
  --primary-color: #1890ff;
}
.button {
  background: var(--primary-color);
}
  1. 动态计算

.box {
  margin: calc(var(--base-margin) * 2);
}
  1. 媒体查询联动

@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

  1. 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();
  }
});
  1. Layout API:自定义布局

  2. Animation API:自定义动画

现状与趋势


你可能感兴趣的:(前端,html,css)