1.html

1.1 请说说src和href的区别？

两者都是用来加载资源的。

特征	src	href
核心作用	引入资源并替换当前标签的内容，将资源嵌入到当前文档的对应位置	建立当前文档和目标资源的关联关系，仅指定资源的引用路径
加载机制	会暂停当前文档的解析和加载，直到该资源加载、执行完成（脚本类资源），属于替换式引入	不会暂停当前文档的解析，浏览器会并行加载该资源，属于关联式引入
常用于	<script>、<img>、<iframe>、<video>、...	<a>、<link>

1.2 iframe 有那些优点和缺点？

优点

可以将网页原封不动的加载进来
增加代码的可复用性
用来加载显示较慢的内容，如广告、视频等

缺点

会阻塞页面渲染
加载内容无法被浏览器引擎识别
跨域问题

1.3 script标签中defer和async的区别

区别	defer	async
加载顺序	有先后顺序	无加载顺序
执行时机	等待当前文档解析完成，再执行	浏览器会并行加载，并立即执行

1.4 说说行内元素和块级元素区别

对比维度	块级元素（Block-level）	行内元素（Inline）
默认布局	独占一行，宽度默认撑满父容器（100%）	不独占一行，多个行内元素可并排显示，宽度仅包裹自身内容
尺寸设置	可自由设置 `width`、`height`、`margin`（上下左右）、`padding`（上下左右）	无法设置 `width`、`height`（设置也无效）； `margin` 仅左右生效，上下无效； `padding` 上下生效但不会推开周围元素，左右正常生效
嵌套规则	可嵌套块级元素、行内元素（部分例外：如 `<p>` 不能嵌套 `<div>`/`<p>` 等块级）	只能嵌套行内元素，不能嵌套块级元素（例外：`<a>` 可嵌套块级，但需注意兼容性）
默认对齐	垂直方向默认顶对齐	水平方向并排，垂直方向默认基线对齐
常见标签	`<div>`、`<p>`、`<h1-h6>`、`<ul>`/`<ol>`/`<li>`、`<section>`、`<header>`、`<footer>`、`<form>` 等	`<span>`、`<a>`、`<img>`（特殊行内替换元素）、`<strong>`、`<em>`、`<label>`、`<br>` 等

补充说明

行内替换元素（如 <img>/<input>）：属于特殊行内元素，可设置 width/height，因浏览器会根据其内容（图片、输入框）计算尺寸，行为介于行内和块级之间。
转换方式：可通过 CSS 的 display 属性切换类型：
- 块级转行内：display: inline;
- 行内转块级：display: block;
- 兼具两者特性（最常用）：display: inline-block;（可设宽高，且不独占一行）。

1.5 html5新标签（酌情了解即可）

HTML5 新增标签主要解决了传统 HTML4 中「通用 div 无语义化」的问题。

一、核心语义化布局标签（替代无意义 div）

这类标签让页面结构更清晰，利于SEO和开发维护：

标签	用途
`<header>`	页面/区块的头部（页眉、导航、标题等）
`<nav>`	导航栏区域（如主导航、侧边导航）
`<main>`	页面核心内容（唯一，一个页面仅一个）
`<section>`	页面中的独立区块（如文章章节、产品模块）
`<article>`	独立的、可复用的内容（如文章、评论、新闻）
`<aside>`	侧边栏/附加内容（如广告、相关推荐、作者信息）
`<footer>`	页面/区块的底部（页脚、版权、联系方式）
`<figure>`	包含媒体内容（图片/视频）+ 说明的组合
`<figcaption>`	配合 `<figure>`，定义媒体内容的标题/说明

二、多媒体标签（原生支持音视频，无需插件）

标签	用途
`<audio>`	嵌入音频文件（如MP3、WAV）
`<video>`	嵌入视频文件（如MP4、WebM）
`<source>`	配合 `<audio>/<video>`，提供多格式资源（兼容不同浏览器）
`<track>`	为视频/音频添加字幕、字幕轨道（如vtt文件）

三、表单新增标签/属性（增强表单功能）

1. 新增表单控件标签

标签	用途
`<datalist>`	为 `<input>` 提供下拉建议列表（类似自动补全）
`<keygen>`	生成密钥对（多用于表单加密，部分浏览器已废弃）
`<output>`	显示表单计算/交互结果（如滑块取值、表单验证结果）

2. 新增input类型（核心，替代传统文本框+js验证）

<input type="xxx"> 新增类型：

email：邮箱输入框（自带格式验证）
tel：电话号码输入框（移动端唤起数字键盘）
url：网址输入框（验证URL格式）
number：数字输入框（限制仅输入数字，带增减按钮）
range：滑块控件（如音量调节、评分）
date/time/datetime-local：日期/时间选择器（原生日历）
search：搜索框（部分浏览器显示清除按钮）
color：颜色选择器（原生取色面板）
month/week：月份/周选择器

四、其他实用新增标签

标签	用途
`<canvas>`	画布，通过JS绘制图形/动画/数据可视化（如echarts底层）
`<svg>`	嵌入矢量图形（可缩放，不失真，区别于canvas位图）
`<progress>`	进度条（如文件上传进度、加载进度）
`<meter>`	度量条（显示已知范围的数值，如磁盘使用率、评分）
`<details>`	折叠面板（默认收起，点击展开）
`<summary>`	配合 `<details>`，定义折叠面板的标题
`<mark>`	高亮文本（如搜索结果关键词）
`<time>`	定义时间/日期（机器可读，利于SEO）
`<ruby>`	标注汉字拼音/注释（如`<ruby>汉<rt>hàn</rt></ruby>`）
`<rt>`	配合 `<ruby>`，定义注释文本
`<rp>`	兼容不支持ruby的浏览器，显示备用文本

补充说明

兼容性：主流浏览器（Chrome/Firefox/Edge）均支持，IE9及以下需通过JS兼容（如用div模拟语义标签）；
核心价值：语义化（提升可读性、SEO）、原生功能（减少第三方插件依赖，如音视频、表单验证）。

1.6 请说说你对语义化的理解

让不同的标签所承载的内容和功能相匹配语义化的价值在于

提升可读性，对开发者友好，便于阅读理解，提升可维护性；
- 无需额外注释，通过标签就能快速读懂页面结构（比如看到<header>就知道是页头，<main>就知道是核心内容）；
对浏览器 / 终端：提升渲染与适配能力
- 浏览器能更精准解析内容（比如<article>会被优先识别为核心内容，<nav>可优化焦点导航）；
对搜索引擎（SEO）：提升内容权重
- 搜索引擎会根据标签结构来判断页面内容，从而提高页面权重

2 css

2.1 什么是和盒模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content（内外边距、内容、边框）。标准盒模型和IE盒模型区别

标准盒模型的宽高只包括内容区
IE盒模型的宽高包括内容区、内边距和边框

可通过修改box-sizing属性来改变盒模型 box-sizing: content-box;设置为标准盒模型（默认） box-sizing: border-box;设置为IE盒模型

2.2 选择器的优先级

选择器类型	权重数值	说明
!important	无穷大	最高优先级，覆盖所有其他规则慎用：破坏可维护性
行内样式(style属性)	1000	直接写在HTML标签上的样式
ID选择器(#id)	100	页面中应保持ID唯一性
类选择器(.class)	10	可复用，推荐优先使用
属性选择器([attr])	10	适用于特定属性值的元素
伪类选择器(:hover等)	10	动态状态样式控制
元素选择器(tag)	1	基础标签选择器
伪元素选择器(::before等)	1	创建虚拟元素
组合选择器(空格、>、+等)	组成部分之和	复杂选择逻辑
通用选择器(*)	0	重置样式时使用
继承样式	0	从父元素继承的样式

2.3 display属性

display 属性核心值及作用对照表

属性值	核心作用	关键特性（布局/尺寸/换行）	常见使用场景
`none`	隐藏元素，且元素不占据任何页面空间（区别于`visibility: hidden`）	不渲染、无尺寸、不占位置	动态隐藏元素（如弹窗关闭、条件渲染）
`block`（块级）	将元素转为块级元素	独占一行；宽高可设；默认宽度100%父容器；margin/padding 上下左右均生效	布局容器（div、header、footer）、按钮/输入框需独占一行时
`inline`（行内）	将元素转为行内元素	不独占一行（并排显示）；宽高不可设；margin/padding 仅左右生效；宽度仅包裹内容	文本内的小元素（span、a、em）、需并排的轻量元素
`inline-block`（行内块）	兼具 inline 和 block 特性	不独占一行；宽高可设；margin/padding 全生效；宽度默认包裹内容	导航栏按钮、表单控件（input/button）、图文并排模块
`flex`（弹性盒）	将元素转为弹性容器，子元素（flex item）按弹性布局排列	容器内子元素可灵活分配空间；支持水平/垂直对齐；子元素默认横向排列	响应式布局（页面整体布局、卡片排列、居中对齐）
`inline-flex`	弹性容器本身为行内元素（不独占一行），子元素仍按 flex 布局	容器不独占一行；子元素 flex 布局；宽高默认包裹内容	行内弹性布局（如文本+按钮的行内对齐）
`grid`（网格）	将元素转为网格容器，子元素按网格（行+列）布局	二维布局（同时控制行和列）；精准划分区域；支持自适应行列	复杂布局（仪表盘、卡片网格、多列图文）
`inline-grid`	网格容器本身为行内元素，子元素仍按 grid 布局	容器不独占一行；子元素 grid 布局	行内网格布局（如行内多列文本模块）
`table`	将元素模拟为`<table>`标签的行为	表现为表格容器；子元素需配合`table-row`/`table-cell`	需表格布局但不想用HTML表格标签时
`table-row`	模拟`<tr>`标签，仅在`display: table`容器内生效	表现为表格行；无独立宽高	配合`table`实现自定义表格
`table-cell`	模拟`<td>`标签，仅在`table-row`内生效	表现为表格单元格；支持垂直对齐（vertical-align）	单元格布局、多行文本垂直居中
`flow-root`	创建一个新的块级格式化上下文（BFC），解决浮动元素导致的父容器高度塌陷问题	同 block 布局；自动包含浮动子元素；不影响其他元素	清除浮动（替代`clearfix` hack）
`contents`	元素本身不渲染，其直接子元素继承该元素的布局上下文	元素“消失”，子元素直接参与父容器布局	简化嵌套结构（如去掉多余的容器 div）
`list-item`	将元素转为列表项（类似`<li>`），自动生成项目符号/编号	独占一行；默认显示列表标记（可通过`list-style`控制）	自定义列表项（非`<li>`标签实现列表）

补充说明

默认值：不同元素的 display 默认值不同：
- 块级元素（div、p、h1）：默认block；
- 行内元素（span、a、em）：默认inline；
- 替换元素（img、input、button）：默认inline-block。
BFC 相关：block/flow-root/flex/grid 等均会创建 BFC，可解决 margin 重叠、浮动塌陷、元素被浮动覆盖等问题。
兼容性：flex/grid 是现代布局核心，主流浏览器均支持（IE10+ 部分支持，IE11 需兼容写法）；flow-root/contents 需注意低版本浏览器兼容。
隐藏元素对比：
- display: none：元素不渲染、无占位，DOM 仍存在；
- visibility: hidden：元素隐藏但占位，布局不变；
- opacity: 0：视觉隐藏，仍可交互、占位。

2.4 block/inline/inline-block/flex区别

display 四大常用值核心差异对照表

对比维度	block（块级）	inline（行内）	inline-block（行内块）	flex（弹性容器）
布局换行	独占一行，强制换行	不独占一行，多个元素并排（超出父容器才换行）	不独占一行，多个元素并排（超出父容器才换行）	容器不换行（需配合`flex-wrap`控制）；子元素默认横向排列，可通过`flex-direction`调整方向
宽高设置	可自由设置 width/height	无法设置 width/height（设置无效）	可自由设置 width/height	容器可设宽高；子元素宽高可设，也可通过`flex`属性自动分配空间
默认宽度	撑满父容器（100%）	仅包裹自身内容（由内容决定）	仅包裹自身内容（由内容决定）	撑满父容器（100%）；子元素默认宽度包裹内容
margin 生效	上下左右均生效	仅左右生效，上下无效	上下左右均生效	容器/子元素 margin 均生效；可通过`justify-content`/`align-items`替代 margin 实现对齐
padding 生效	上下左右均生效，会推开周围元素	上下生效但不推开周围元素，左右正常生效	上下左右均生效，会推开周围元素	容器/子元素 padding 均生效
垂直对齐	默认顶对齐（无`vertical-align`效果）	支持`vertical-align`（默认基线对齐）	支持`vertical-align`（默认基线对齐）	子元素可通过`align-items`/`align-self`精准控制垂直对齐（基线/居中/顶/底等）
BFC 特性	会创建 BFC（解决浮动塌陷、margin重叠）	不创建 BFC	会创建 BFC	会创建 BFC
常见使用场景	页面大布局（header、footer、div）	文本内小元素（span、a、em）	导航按钮、表单控件（input/button）、图文并排	响应式布局（页面整体、卡片排列、居中对齐）

快速选型建议

需独占一行+自定义宽高 → block；
需并排+仅包裹文本/小元素 → inline；
需并排+自定义宽高+margin/padding 全生效 → inline-block；
需灵活分配子元素空间（水平/垂直居中、自适应占比）→ flex（现代布局首选）。

2.5 如何隐藏元素？

方法	核心说明	渲染状态	占位情况	交互性（点击/聚焦）	DOM 存在	补充说明
`display: none`	完全隐藏，浏览器不渲染	❎	❎	❎	✅	子元素也被隐藏，无过渡动画
`visibility: hidden`	视觉隐藏，保留布局	✅	✅	❎	✅	子元素可单独设`visible`显示
`opacity: 0`	透明度为0，视觉不可见	✅	✅	✅	✅	支持过渡动画，可正常交互
`position: absolute`	绝对定位（脱离文档流）	✅	❎	✅	✅	本身不隐藏，仅脱离正常布局流
`z-index: -1`	层级降低，被遮挡（视觉隐藏）	✅	✅	❎（被遮挡时）	✅	仅对非static定位元素生效

2.6 单行多行文本溢出

单行文本溢出：

css

:root {
    overflow: hidden;
/ / 溢出隐藏 text-overflow: ellipsis;
/ / 溢出用省略号显示 whtie-space: nowrap;
/ / 规定段落中的文本不进行换行
}

多行文本溢出：

css

:root {
    overflow: hidden;
    text-overflow: ellipsis;
/ / 溢出用省略号显示 display: -webkit-box;
/ / 作为弹性伸缩盒子模型显示。 -webkit-box-orient: vertical;
/ / 设置伸缩盒子的子元素排列方式：从上到下垂直排列 -webkit-line-clamp: 3;
/ / 显示的行数
}

2.7 居中方式

详情请见文章

2.8 px/rem/vw/vh/vmin/vmax区别

单位	定义	基准	响应式	主要用途
`px`	像素（固定单位）	设备像素	❌ 固定	精确控制（边框、图标）
`rem`	根元素字体倍数	`<html>`的`font-size`	✅ 相对	移动端布局（文字、间距）
`em`	父元素字体倍数	父元素的 `font-size`	✅ 相对	移动端布局（文字、间距）
`vw`	视口宽度1/100	浏览器宽度	✅ 相对	宽度适配（容器、页面）
`vh`	视口高度1/100	浏览器高度	✅ 相对	高度适配（全屏组件）
`vmin`	视口宽高中较小值1/100	宽高最小值	✅ 相对	横竖屏兼容（圆形元素）
`vmax`	视口宽高中较大值1/100	宽高最大值	✅ 相对	视口填充（背景、按钮）

使用建议

固定尺寸：使用 px
移动端适配：使用 rem 或 vw/vh
视口适配：使用 vw/vh
横竖屏兼容：使用 vmin/vmax

1. 关键计算示例（以视口宽375px、高812px，根字体16px为例）：

1px = 固定1个CSS像素；
1rem = 16px（若设置html {font-size: 100px;}，则1rem=100px）；
1vw = 375/100 = 3.75px；
1vh = 812/100 = 8.12px；
1vmin = min(375,812)/100 = 3.75px；
1vmax = max(375,812)/100 = 8.12px。

2. 实用适配技巧：

移动端常用方案：html {font-size: 10vw;}（如375px屏根字体=37.5px，1rem=37.5px，便于按设计稿1:10换算）；
横竖屏兼容：圆形头像用width: 20vmin; height: 20vmin;，保证始终为圆形；
全屏容器：width: 100vw; height: 100vh;（注意移动端会被状态栏遮挡，可配合safe-area-inset）。

3. 响应式优先级：

vw/vh/vmin/vmax（直接适配视口） > rem（间接适配） > px（固定值）。

2.9 什么是BFC？如何创建BFC？

BFC（Block Formatting Context，块级格式化上下文）是 Web 页面中盒模型布局的 CSS 渲染模式，是一个独立的渲染区域。

BFC 的作用

防止 margin 重叠：BFC 内的垂直 margin 不会与外部元素的 margin 重叠
清除浮动：BFC 可以包含浮动元素，解决父容器高度塌陷问题
隔离布局：BFC 内的元素不会影响外部元素的布局

如何创建 BFC

以下情况会创建 BFC：

根元素（<html>）
float 不为 none 的元素
position 为 absolute 或 fixed 的元素
display 为 inline-block、flex、grid、table、table-cell、flow-root 的元素
overflow 不为 visible 的元素（常用）

实际应用场景

1. 清除浮动：

css

.container {
    overflow: hidden; /* 创建 BFC */
}

2. 防止 margin 重叠：

css

.parent {
    overflow: hidden; /* 创建 BFC */
}

.child {
    margin: 20px; /* 不会与外部 margin 重叠 */
}

2.10 浮动和清除浮动

浮动的特点

元素脱离文档流，不占据原位置
向左或向右移动，直到碰到父容器的边缘或另一个浮动元素
浮动的元素会尽量靠上显示

清除浮动的方法

1. 使用 clear 属性（传统方法）：

css

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

2. 使用 BFC（推荐）：

css

.container {
    overflow: hidden; /* 或 overflow: auto */
}

3. 使用 flow-root（现代方法）：

css

.container {
    display: flow-root;
}

2.11 CSS3 新特性

1. 选择器增强

属性选择器：[attr^="val"]（开头）、[attr$="val"]（结尾）、[attr*="val"]（包含）
伪类选择器：:nth-child()、:nth-of-type()、:not()、:focus-within 等
伪元素选择器：::before、::after、::selection 等

2. 布局方式

Flexbox：弹性布局，一维布局
Grid：网格布局，二维布局

3. 视觉效果

边框：border-radius（圆角）、box-shadow（阴影）、border-image（边框图片）
背景：background-size、background-clip、background-origin、多背景图
渐变：linear-gradient()、radial-gradient()

4. 动画和过渡

过渡：transition（属性过渡动画）
动画：@keyframes + animation（关键帧动画）
变换：transform（旋转、缩放、位移、倾斜）

5. 字体和文本

自定义字体：@font-face
文本效果：text-shadow（文字阴影）、text-overflow（文本溢出）、word-wrap（换行）

6. 其他特性

媒体查询：@media（响应式设计）
多列布局：column-count、column-gap
滤镜：filter（模糊、亮度、对比度等）

2.12 响应式设计

响应式设计是一种网页设计方法，使网页能够在不同设备（桌面、平板、手机）上提供良好的浏览体验。

核心要素

1. 流体网格（Fluid Grid）：

css

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

2. 弹性图片（Flexible Images）：

css

img {
    max-width: 100%;
    height: auto;
}

3. 媒体查询（Media Queries）：

css

/* 移动端 */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

/* 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 20px;
    }
}

/* 桌面端 */
@media (min-width: 1025px) {
    .container {
        padding: 30px;
    }
}

常用断点

移动端：< 768px
平板：768px - 1024px
桌面端：> 1024px

视口设置

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.13 position 定位

属性值	说明	脱离文档流	定位基准	常见使用场景
`static`	默认值，正常文档流	❌	正常文档流	默认布局
`relative`	相对定位，相对于自身原始位置	❌	自身原始位置	微调元素位置、作为 absolute 定位基准
`absolute`	绝对定位，相对于最近的已定位祖先元素（非 static）	✅	最近的已定位祖先元素（若无则相对于 body）	弹窗、下拉菜单、图标定位
`fixed`	固定定位，相对于浏览器视口	✅	浏览器视口	固定导航栏、回到顶部按钮
`sticky`	粘性定位，在滚动到阈值前为 relative，之后为 fixed	❌	最近的滚动容器	吸顶导航、表格固定表头

使用示例

css

/* 相对定位 */
.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

/* 绝对定位 */
.absolute-box {
    position: absolute;
    top: 0;
    right: 0;
}

/* 固定定位 */
.fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* 粘性定位 */
.sticky-header {
    position: sticky;
    top: 0;
}

2.14 CSS 性能优化

1. 选择器优化

避免深层嵌套：选择器嵌套层级不超过 3 层
避免通配符选择器：* 会影响性能
使用类选择器：比标签选择器更高效

2. 减少重排和重绘

使用 transform 代替 top/left：transform 不会触发重排
使用 opacity 代替 visibility：opacity 可以触发 GPU 加速
批量修改 DOM：避免频繁修改样式

3. 使用 CSS3 硬件加速

css

.element {
    transform: translateZ(0); /* 触发 GPU 加速 */
    will-change: transform; /* 提示浏览器优化 */
}

4. 减少 CSS 文件大小

压缩 CSS 文件
移除未使用的样式
使用 CSS 预处理器（Sass/Less）管理代码

5. 合理使用 `@import`

避免使用 @import，因为它会阻塞渲染，应使用 <link> 标签。

2.15 浏览器兼容性

CSS 兼容性处理

1. 浏览器前缀：

css

.element {
    -webkit-transform: translateX(10px); /* Chrome、Safari */
    -moz-transform: translateX(10px);    /* Firefox */
    -ms-transform: translateX(10px);     /* IE */
    -o-transform: translateX(10px);      /* Opera */
    transform: translateX(10px);         /* 标准 */
}

2. 条件注释（IE 专属）：

html

<!--[if IE]>
    <link rel="stylesheet" href="ie.css">
<![endif]-->

3. 使用 Autoprefixer：

自动添加浏览器前缀的工具，可在构建阶段处理。

常见兼容性问题

Flexbox：IE10+ 需要前缀
Grid：IE11 需要兼容写法
CSS3 动画：需要浏览器前缀
透明度：IE8 使用 filter: alpha(opacity=50)

最后更新：2025年

1.html ​

1.1 请说说src和href的区别？ ​

1.2 iframe 有那些优点和缺点？ ​

优点 ​

缺点 ​

1.3 script标签中defer和async的区别 ​

1.4 说说行内元素和块级元素区别 ​

补充说明 ​

1.5 html5新标签（酌情了解即可） ​

一、核心语义化布局标签（替代无意义 div） ​

二、多媒体标签（原生支持音视频，无需插件） ​

三、表单新增标签/属性（增强表单功能） ​

1. 新增表单控件标签 ​

2. 新增input类型（核心，替代传统文本框+js验证） ​

四、其他实用新增标签 ​

补充说明 ​

1.6 请说说你对语义化的理解 ​

2 css ​

2.1 什么是和盒模型 ​

2.2 选择器的优先级 ​

2.3 display属性 ​

display 属性核心值及作用对照表 ​

补充说明 ​

2.4 block/inline/inline-block/flex区别 ​

display 四大常用值核心差异对照表 ​

快速选型建议 ​

2.5 如何隐藏元素？ ​

2.6 单行多行文本溢出 ​

2.7 居中方式 ​

2.8 px/rem/vw/vh/vmin/vmax区别 ​

使用建议 ​

1. 关键计算示例（以视口宽375px、高812px，根字体16px为例）： ​

2. 实用适配技巧： ​

3. 响应式优先级： ​

2.9 什么是BFC？如何创建BFC？ ​

BFC 的作用 ​

如何创建 BFC ​

实际应用场景 ​

2.10 浮动和清除浮动 ​

浮动的特点 ​

清除浮动的方法 ​

2.11 CSS3 新特性 ​

1. 选择器增强 ​

2. 布局方式 ​

3. 视觉效果 ​

4. 动画和过渡 ​

5. 字体和文本 ​

6. 其他特性 ​

2.12 响应式设计 ​

核心要素 ​

常用断点 ​

视口设置 ​

2.13 position 定位 ​

使用示例 ​

2.14 CSS 性能优化 ​

1. 选择器优化 ​

2. 减少重排和重绘 ​

3. 使用 CSS3 硬件加速 ​

4. 减少 CSS 文件大小 ​

5. 合理使用 @import ​

2.15 浏览器兼容性 ​

CSS 兼容性处理 ​

常见兼容性问题 ​

1.html

1.1 请说说src和href的区别？

1.2 iframe 有那些优点和缺点？

优点

缺点

1.3 script标签中defer和async的区别

1.4 说说行内元素和块级元素区别

补充说明

1.5 html5新标签（酌情了解即可）

一、核心语义化布局标签（替代无意义 div）

二、多媒体标签（原生支持音视频，无需插件）

三、表单新增标签/属性（增强表单功能）

1. 新增表单控件标签

2. 新增input类型（核心，替代传统文本框+js验证）

四、其他实用新增标签

补充说明

1.6 请说说你对语义化的理解

2 css

2.1 什么是和盒模型

2.2 选择器的优先级

2.3 display属性

display 属性核心值及作用对照表

补充说明

2.4 block/inline/inline-block/flex区别

display 四大常用值核心差异对照表

快速选型建议

2.5 如何隐藏元素？

2.6 单行多行文本溢出

2.7 居中方式

2.8 px/rem/vw/vh/vmin/vmax区别

使用建议

1. 关键计算示例（以视口宽375px、高812px，根字体16px为例）：

2. 实用适配技巧：

3. 响应式优先级：

2.9 什么是BFC？如何创建BFC？

BFC 的作用

如何创建 BFC

实际应用场景

2.10 浮动和清除浮动

浮动的特点

清除浮动的方法

2.11 CSS3 新特性

1. 选择器增强

2. 布局方式

3. 视觉效果

4. 动画和过渡

5. 字体和文本

6. 其他特性

2.12 响应式设计

核心要素

常用断点

视口设置

2.13 position 定位

使用示例

2.14 CSS 性能优化

1. 选择器优化

2. 减少重排和重绘

3. 使用 CSS3 硬件加速

4. 减少 CSS 文件大小

5. 合理使用 `@import`

2.15 浏览器兼容性

CSS 兼容性处理

常见兼容性问题