前端面试准备指南一之HTML&CSS篇

前端面试 HTML CSS
前端 面试 技术总结
发布日期:   2026-05-03
更新日期:   2026-05-04
文章字数:   2.9k
阅读时长:   11 分
阅读次数:  

一、HTML5新特性与语义化

1.1 语义化概述

语义化意味着顾名思义，HTML5的语义化指的是合理正确地使用语义化的标签来创建页面结构，如 header、footer、nav 等，从标签上即可以直观地知道这个标签的作用，而不是滥用 div 标签。

语义化标签：

  • header：页面或区域的头部
  • nav：导航栏
  • main：主要内容区域
  • article：文章内容
  • section：文档区块
  • aside：侧边栏
  • footer：页面或区域的底部

语义化的优点：

  • 代码结构清晰，易于阅读，利于开发和维护
  • 方便其他设备解析（如屏幕阅读器）根据语义渲染网页
  • 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

1.2 HTML5表单新特性

新的输入类型：

  • email：电子邮箱输入
  • tel：电话号码输入
  • number：数字输入
  • date：日期选择
  • range：滑块控件
  • color：颜色选择

表单验证属性：

  • required：必填字段
  • pattern：正则表达式验证
  • min / max：数值范围限制
  • minlength / maxlength：字符长度限制

新增表单控件：

  • datalist：输入建议列表
  • progress：进度条
  • meter：度量衡指示器

二、CSS盒子模型

2.1 盒模型概述

所有 HTML 元素可以看作盒子，在 CSS 中，box model 这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。

盒模型组成：

┌─────────────────────────────┐
│          Margin             │
│  ┌───────────────────────┐  │
│  │        Border         │  │
│  │  ┌─────────────────┐  │  │
│  │  │     Padding     │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  Content  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

2.2 盒模型类型

标准盒模型（content-box）：

  • width/height 只包含内容（content）
  • 不包含 padding、border、margin
  • 实际占用空间 = content + padding + border + margin

IE盒模型（border-box）：

  • width/height 包含内容（content）、padding 和 border
  • 不包含 margin
  • 实际占用空间 = width/height + margin

2.3 box-sizing 属性

/* 默认值，标准盒模型 */
box-sizing: content-box;

/* IE盒模型，更易于布局计算 */
box-sizing: border-box;

/* 推荐：全局使用 border-box */
* {
    box-sizing: border-box;
}

三、CSS样式优先级

3.1 优先级排序

CSS选择器的优先级从高到低为：

!important > 内联样式 > ID选择器 > 类选择器/伪类/属性选择器 > 元素选择器 > 通配符 > 继承

3.2 优先级权重计算

** specificity（特异性）计算规则**：

选择器类型 权重值
内联样式 1000
ID选择器 100
类选择器/伪类/属性选择器 10
元素选择器/伪元素 1
通配符 0

示例：

/* ID选择器，权重 100 */
#header {
    color: red;
}

/* 类选择器，权重 10 */
.container {
    color: blue;
}

/* 元素选择器，权重 1 */
div {
    color: green;
}

/* 结果：红色优先级最高 */

注意：当优先级相同时，后面声明的样式会覆盖前面的样式（后来居上原则）。

四、BFC（块格式化上下文）

4.1 BFC定义

BFC 是 Block Formatting Context 的缩写，即块格式化上下文。BFC 是 CSS 布局的一个概念，是一个独立的渲染区域，里面的元素不会影响外面的元素。

布局规则：

  • Box 是 CSS 布局的对象和基本单位，页面是由若干个 Box 组成的
  • 元素的类型和 display 属性，决定了这个 Box 的类型
  • 不同类型的 Box 会参与不同的 Formatting Context

4.2 创建BFC的方法

  • 浮动元素（float: left/right）
  • display: inline-block
  • display: table-cell, flex, table-caption, inline-flex, flow-root（现代方式，推荐）
  • overflow: hidden/auto/scroll（非 visible）
  • position: absolute/fixed

推荐使用：display: flow-root（不会产生副作用）

4.3 BFC应用场景

防止margin重叠：

  • 同一个 BFC 内的相邻元素，垂直方向的 margin 会合并
  • 分属于不同的 BFC 时，可以防止 margin 重叠

清除内部浮动：

  • 浮动元素会脱离文档流，导致父元素高度塌陷
  • 给父元素创建 BFC，可以包含浮动元素

自适应多栏布局：

  • BFC 不会与浮动元素重叠
  • 可以实现两栏布局（文字环绕 + 侧边栏）

五、em和rem的区别

对于 em 和 rem 的区别一句话概括：em 相对于父元素，rem 相对于根元素。

5.1 基本概念

em：

  • 相对于父元素的字体大小
  • 如果没有设置，则继承自祖先元素
  • 最终相对于根元素（如果祖先都没设置）

rem：

  • 相对于根元素（<html>）的字体大小
  • 不受父元素影响
  • 推荐用于响应式布局

5.2 区别对比

特性 em rem
参照物 父元素 根元素
级联效果 有 (逐级相乘) 无
响应式适配 复杂 简单 (推荐)

示例：

html {
    font-size: 16px;
}

.parent {
    font-size: 1.5em;
} /* 24px = 16px * 1.5 */
.child {
    font-size: 1.5em;
} /* 36px = 24px * 1.5 */

/* 使用 rem 避免级联问题 */
.rem-parent {
    font-size: 1.5rem;
} /* 24px */
.rem-child {
    font-size: 1.5rem;
} /* 24px */

六、CSS Flexbox和Grid布局

6.1 Flexbox（弹性布局）

一维布局模型，适用于行或列的布局。

Flex容器属性：

  • display: flex 或 display: inline-flex
  • flex-direction：主轴方向（row/column）
  • justify-content：主轴对齐方式
  • align-items：交叉轴对齐方式
  • flex-wrap：换行方式

Flex项目属性：

  • flex-grow：放大比例
  • flex-shrink：缩小比例
  • flex-basis：初始大小
  • align-self：单独对齐方式

常用场景：

  • 水平居中
  • 等高列布局
  • 导航菜单
  • 卡片网格

详情查看 弹性布局 (display:flex) 属性详解

6.2 Grid（网格布局）

二维布局模型，适用于复杂的网格布局。

Grid容器属性：

  • display: grid 或 display: inline-grid
  • grid-template-columns：定义列
  • grid-template-rows：定义行
  • gap：间距
  • grid-template-areas：命名区域

常用场景：

  • 页面整体布局
  • 相册网格
  • 仪表盘
  • 复杂的对齐需求

详情查看 网格布局 (display: grid) 属性详解

6.3 Flexbox vs Grid 对比

特性 Flexbox Grid
维度 一维（行或列） 二维（行和列）
控制方式 内容驱动 容器驱动
适用场景 组件布局 页面布局
对齐能力 强大 更强大

七、CSS变量和预处理器

7.1 CSS变量

定义和使用：

:root {
    --primary-color: #3498db;
    --spacing: 16px;
    --border-radius: 8px;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing);
    border-radius: var(--border-radius);
}

优点：

  • 统一管理主题样式
  • 方便动态修改
  • 减少重复代码

7.2 CSS预处理器

Sass/SCSS 和 Less 提供的特性：

特性 说明
变量 存储颜色、尺寸等值
嵌套 减少重复选择器
混合（Mixin） 复用样式块
运算 数学计算
条件语句 @if/@else
循环 @for/@each

示例（Sass）：

$primary-color: #3498db;

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    background-color: $primary-color;
    @include flex-center;
}

八、响应式设计原理

8.1 核心原则

  • 移动优先：先设计移动端，再适配更大屏幕
  • 弹性布局：使用相对单位代替固定单位
  • 断点设计：在不同屏幕尺寸应用不同样式

8.2 媒体查询

/* 移动优先 */

/* 小屏幕（平板） */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* 中等屏幕（桌面） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* 大屏幕 */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

8.3 响应式单位

单位 说明 适用场景
em 相对于父元素字体 组件内响应式
rem 相对于根元素字体 全局响应式
% 相对于父元素 流体布局
vw/vh 视口宽度/高度 视口相关布局
vmin/vmax 视口较小/较大边 极端情况适配

九、CSS动画和过渡效果

9.1 CSS过渡（Transition）

属性：

  • transition-property：过渡属性
  • transition-duration：持续时间
  • transition-timing-function：缓动函数
  • transition-delay：延迟时间

简写形式：

.button {
    transition:
        background-color 0.3s ease-in-out,
        transform 0.2s;
}

9.2 CSS动画（Animation）

基本语法：

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.element {
    animation: slideIn 0.5s ease-out;
}

动画属性：

  • animation-name：动画名称
  • animation-duration：持续时间
  • animation-timing-function：缓动函数
  • animation-delay：延迟时间
  • animation-iteration-count：播放次数
  • animation-direction：播放方向

十、浏览器渲染机制

10.1 网页生成过程

  1. HTML解析：HTML 被解析器解析成 DOM 树
  2. CSS解析：CSS 被解析器解析成 CSSOM 树
  3. 渲染树构建：结合 DOM 树和 CSSOM 树，生成渲染树（Render Tree）
  4. 布局计算：计算每个节点的位置和尺寸（Layout）
  5. 绘制：将布局绘制到屏幕上（Paint）
  6. 合成：将不同图层合成（Composite）

10.2 重排（Reflow）与重绘（Repaint）

重排（回流）：

  • 当 DOM 的变化影响了元素的几何信息（位置、尺寸大小）
  • 浏览器需要重新计算元素的几何属性
  • 性能开销较大

触发重排的操作：

  1. 添加或删除可见的 DOM 元素
  2. 元素尺寸改变（边距、填充、边框、宽高）
  3. 改变元素位置（top、left、right、bottom）
  4. 改变元素内容（文本变化、图片尺寸变化）
  5. 窗口大小改变
  6. 获取元素尺寸或位置属性（offsetWidth、offsetHeight、getBoundingClientRect 等）

重绘：

  • 当元素的外观发生改变，但几何属性不变
  • 浏览器重新绘制元素外观
  • 性能开销比重排小

触发重绘的操作：

  • 改变元素的 color、background、box-shadow、visibility 等属性

10.3 优化建议

减少重排重绘：

  1. 分离读写操作：先读后写，避免多次布局
  2. 集中样式修改：使用 cssText 或切换类名批量修改多个元素的样式
  3. 缓存布局信息：避免重复获取偏移量
  4. 使用定位：尽量只修改 position: absolute/fixed 的元素
  5. GPU加速：使用 transform、opacity 创建合成层

重绘和重排是两个不同的概念，重绘是元素外观的改变，重排是元素几何信息的改变。

transform vs 位置属性：

transform 不会触发重排（回流），因为它不改变元素的几何属性。对于 transition/animate 动画，使用 transform（特别是配合 will-change 或 3D transform）会创建合成层，避免触发重绘。浏览器会通过重新复合来创建动画帧，从而提升性能。

/* 性能差：触发重排 */
.element {
    top: 100px;
    left: 50px;
}

/* 性能好：触发重绘，使用GPU加速 */
.element {
    transform: translate(50px, 100px);
}

will-change 提示：

.element {
    will-change: transform; /* 提前告知浏览器元素将变化 */
}

十一、CSS性能优化

11.1 选择器优化

  • 避免使用通配符选择器
  • 减少选择器嵌套层级
  • 使用高效选择器（ID > 类 > 元素）

不推荐：

.header .nav ul li a {
    color: white;
}

推荐：

.nav-link {
    color: white;
}

11.2 渲染优化

  • 使用 transform 和 opacity 实现动画（创建合成层）
  • 避免同时动画多个属性
  • 使用 will-change 提示浏览器

11.3 其他优化

  • 避免使用 !important
  • 使用简写属性
  • 压缩 CSS 文件
  • 延迟加载非关键 CSS

十二、无障碍访问（ARIA）

12.1 语义化标签

  • 使用正确的 HTML5 语义化标签
  • 确保标题层级正确（h1 → h2 → h3）
  • 使用 alt 属性为图片提供替代文本

12.2 ARIA属性

常用 ARIA 属性：

属性 说明
aria-label 为元素提供可访问名称
aria-describedby 关联描述
aria-hidden 隐藏元素（但不从DOM中移除）
aria-expanded 指示展开/折叠状态
aria-disabled 指示禁用状态

12.3 键盘可访问性

  • 确保所有可交互元素可以通过键盘访问
  • 使用 :focus 样式指示焦点
  • 提供跳过链接（Skip Link）
  • 确保焦点顺序合理

示例：

<!-- 跳转到主内容的链接 -->
<a href="#main-content" class="skip-link">跳转到主要内容</a>

<style>
    .skip-link {
        position: absolute;
        top: -40px;
    }
    .skip-link:focus {
        top: 0;
    }
</style>
文章作者: 弈心
文章链接: https://blog.mingxuan.tech/2026/05/44483.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 弈心 !
前端面试 HTML CSS
赏
评论
 上一篇
前端面试准备指南七之性能优化篇 前端面试准备指南七之性能优化篇
前端性能优化核心知识点，涵盖浏览器渲染流程、网络优化、HTTP缓存、代码优化、本地存储等，包括事件代理、节流防抖、回流重绘、EventLoop、localStorage/IndexedDB等核心概念
2026-05-03 前端 面试 技术总结
前端面试 性能优化 浏览器渲染 网络优化 代码优化
下一篇 
前端面试准备指南五之其他前端技术篇 前端面试准备指南五之其他前端技术篇
其他前端技术核心知识点，包括小程序开发、APP项目、认证授权、微前端等
2026-05-03 前端 面试 技术总结
前端面试 小程序 APP OAUTH 微前端
  目录