1. 网络中使用最多的图片格式有哪些？
核心常用图片格式有 4 种，各有适配场景，优先级从高到低为：WebP > JPG > PNG > SVG
- WebP：最推荐，压缩比极高（比 JPG 小 25%-50%），支持透明、动图，兼容性覆盖主流浏览器；唯一缺点是旧版 IE 不支持。
- JPG/JPEG：有损压缩，适合照片、复杂色彩图片（如轮播图），体积小；缺点是不支持透明、压缩过度会失真。
- PNG：无损压缩，支持透明（PNG8/PNG24），适合图标、LOGO、截图；缺点是色彩复杂图片体积大。
- SVG：矢量图，无限放大不失真，体积小，可通过 CSS/JS 控制；适合图标、简单图形；缺点是复杂图形渲染成本高。
2. 请简述 CSS 盒子模型
CSS 盒子模型是浏览器渲染元素的基础，每个元素都被视为一个“盒子”，由内到外分为 4 部分，核心分为两种模式：
（1）盒子组成（从内到外）
- content（内容区）：存放元素内容（文字、图片等），宽高由 width/height 定义。
- padding（内边距）：内容区与边框之间的距离，不占容器空间，会撑大盒子（默认模式下）。
- border（边框）：包裹内边距和内容区，占容器空间。
- margin（外边距）：盒子与其他盒子的距离，不占自身盒子空间，会产生折叠。
（2）两种模型（由 box-sizing 控制）
- content-box（默认）：width/height 仅控制 content 宽度，padding 和 border 会额外撑大盒子。
- border-box（推荐）：width/height 包含 content、padding、border，padding 和 border 不会撑大盒子，布局更可控。
3. 视频/音频标签的使用
HTML5 新增
（1）视频标签
<video src="video.mp4" <!-- 视频地址 -->controls <!-- 显示默认播放控件（播放/暂停、音量等） -->autoplay <!-- 自动播放（需配合muted静音，否则多数浏览器禁止） -->muted <!-- 静音播放 -->loop <!-- 循环播放 -->poster="poster.jpg" <!-- 视频加载前显示的封面图 -->width="600" <!-- 视频宽度 -->preload="auto" <!-- 预加载策略（auto：自动预加载；none：不预加载） -->
>您的浏览器不支持video标签，请升级浏览器 <!-- 降级提示 -->
</video>
（2）音频标签
<audio src="audio.mp3"controlsautoplaymutedloop
>您的浏览器不支持audio标签，请升级浏览器
</audio>
注意：autoplay 属性在 Chrome、Safari 等浏览器中，需配合 muted 才能生效，避免自动播放打扰用户。
4. HTML5 新增的内容有哪些？
HTML5 核心新增内容分 5 大类，重点解决旧版 HTML 功能缺失、兼容性差的问题：
- 语义化标签：
、 - 媒体标签：
- 表单增强：新增 input 类型（email、tel、number、date、range）、表单属性（required、placeholder、autofocus、pattern）、
- API 扩展：本地存储（localStorage/sessionStorage）、地理位置（Geolocation）、拖拽 API（Drag and Drop）、WebSocket（长连接）。
- 其他优化：废除过时标签（、
）、支持 inline SVG、新增
5. CSS3 新增的特性
CSS3 核心新增特性围绕“样式增强、布局灵活、交互丰富”展开，分 6 大类：
- 选择器增强：属性选择器（[attr^=value]）、伪元素（::before/::after）、伪类（:nth-child()、:hover、:active、:focus）、结构伪类（:first-of-type、:last-of-type）。
- 样式效果：圆角（border-radius）、阴影（box-shadow、text-shadow）、渐变（linear-gradient、radial-gradient）、透明度（opacity）、边框图片（border-image）。
- 布局模型：Flexbox（弹性盒子）、Grid（网格布局）、多列布局（column-count）。
- 动画过渡：过渡（transition）、关键帧动画（animation）、2D/3D 变换（transform）。
- 媒体查询：@media 查询，实现响应式布局。
- 其他优化：box-sizing 属性、calc()计算函数、文字溢出处理（text-overflow）、弹性盒相关属性。
6. CSS 中的动画都有哪些属性？
CSS 动画分“过渡动画（transition）”和“关键帧动画（animation）”，核心属性如下：
（1）过渡动画（transition，简单动画，需触发条件）
- transition-property：指定过渡的属性（如 width、background-color，all 表示所有属性）。
- transition-duration：过渡持续时间（如 0.5s，必须设置，否则无效果）。
- transition-timing-function：过渡速度曲线（ease：默认，慢-快-慢；linear：匀速；ease-in：慢进；ease-out：慢出）。
- transition-delay：过渡延迟时间（如 0.2s，延迟多久开始过渡）。
- 简写：transition: property duration timing-function delay;
（2）关键帧动画（animation，复杂动画，可自动执行）
- animation-name：绑定的关键帧名称（需配合 @keyframes 定义）。
- animation-duration：动画持续时间。
- animation-timing-function：动画速度曲线（同 transition）。
- animation-delay：动画延迟时间。
- animation-iteration-count：动画循环次数（infinite 表示无限循环）。
- animation-direction：动画播放方向（normal：正向；reverse：反向；alternate：正反交替）。
- animation-fill-mode：动画结束后状态（forwards：保持最后一帧；backwards：回到初始帧）。
- animation-play-state：动画状态（running：播放；paused：暂停）。
- 简写：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
（3）变换属性（配合动画使用）
transform：2D/3D 变换（translate：平移；scale：缩放；rotate：旋转；skew：倾斜），不影响其他元素布局。
7. 清除浮动的方法有哪些？请说出各自的优缺点
浮动（float）会导致父元素高度坍塌，需通过清除浮动解决，常用 5 种方法及优劣如下：
| 方法 | 实现代码 | 优点 | 缺点 |
|---|---|---|---|
| 额外标签法 | 父元素末尾加 | 简单易懂，兼容性好 | 增加无意义标签，语义化差，代码冗余 |
| 父元素 overflow:hidden | .parent | 代码简洁，无额外标签 | 会隐藏父元素超出部分的内容，不适合有定位元素的场景 |
| 父元素伪元素清除（推荐） | .parent::after | 语义化好，无额外标签，兼容性强 | 代码稍多（可封装为公共类） |
| 父元素浮动 | .parent | 简单，无额外代码 | 会导致父元素自身浮动，影响外层布局，连锁问题多 |
| 父元素设置 BFC | .parent | 无副作用，布局稳定 | display: flow-root 兼容性稍差（IE 不支持） |
推荐优先使用「伪元素清除法」或「BFC 清除法」，兼顾兼容性和无副作用。
8. 定位的属性值有什么区别？
CSS 定位（position）有 5 个属性值，核心区别在于“定位基准”和“是否脱离文档流”：
| 属性值 | 定位基准 | 是否脱离文档流 | 核心特点/使用场景 |
|---|---|---|---|
| static（默认） | 无定位基准 | 否 | 正常文档流布局，top/right/bottom/left、z-index 无效；用于取消定位 |
| relative（相对定位） | 自身原来的位置 | 否 | 不脱离文档流，保留自身占位；用于微调元素位置、作为绝对定位的父容器 |
| absolute（绝对定位） | 最近的已定位（非 static）父元素，无则相对于视口 | 是 | 脱离文档流，不保留占位；用于弹窗、悬浮元素、精准定位 |
| fixed（固定定位） | 浏览器视口 | 是 | 脱离文档流，不随页面滚动；用于导航栏、回到顶部按钮、悬浮广告 |
| sticky（粘性定位） | 滚动到指定阈值前相对父元素，之后相对视口 | 否（滚动前）/ 是（滚动后） | 结合 relative 和 fixed 特性；用于滚动吸顶导航、列表标题吸顶 |
注意：absolute/fixed/sticky 需配合 top/right/bottom/left 定位，否则效果等同于 static。
9. 子元素如何在父元素中居中？（含水平 + 垂直）
分“水平居中”“垂直居中”“水平垂直居中”三类场景，按兼容性和简洁度排序推荐：
（1）水平居中
- 行内/行内块子元素：父元素设置 text-align: center;
- 块级子元素（固定宽度）：子元素设置 margin: 0 auto;
- 任意子元素（Flex 布局）：父元素设置 display: flex; justify-content: center;
（2）垂直居中
- 单行文本：父元素设置 line-height = 父元素 height;
- 任意子元素（Flex 布局，推荐）：父元素设置 display: flex; align-items: center;
- 任意子元素（定位 +transform）：父元素 relative，子元素 absolute; top: 50%; transform: translateY(-50%);
（3）水平垂直居中（常用 3 种方案）
- Flex 布局（推荐）：.parent
- 定位 +transform：.parent { position: relative; } .child
- Grid 布局（现代浏览器）：.parent
10. border-box 与 content-box 的区别
两者是 box-sizing 的两个值，核心区别在于“width/height 是否包含 padding 和 border”：
| 属性值 | width/height 包含范围 | 盒子实际宽度 | 特点/使用场景 |
|---|---|---|---|
| content-box（默认） | 仅包含 content（内容区） | width + padding-left/right + border-left/right | padding 和 border 会撑大盒子，布局易出错；适合简单场景 |
| border-box（推荐） | content + padding + border | 等于设置的 width（固定） | padding 和 border 不会撑大盒子，布局可控；适合复杂布局、响应式开发 |
推荐全局设置：* { box-sizing: border-box; }，避免布局计算误差。
11. 如何实现元素垂直居中？（单独强调，补充细节）
除上述通用方案外，补充 6 种垂直居中方案，适配不同场景：
- 单行文本：父元素 line-height = 父元素 height（如.parent { height: 50px; line-height: 50px; }）。
- 多行文本：父元素 display: table-cell; vertical-align: middle;（兼容性好，需父元素设置 height）。
- Flex 布局：.parent { display: flex; align-items: center; }（简洁，适配所有元素）。
- 定位 +transform：.child { position: absolute; top: 50%; transform: translateY(-50%); }（无需知道子元素高度）。
- margin-auto（定位场景）：.child { position: absolute; top: 0; bottom: 0; margin: auto 0; }（需父元素 relative）。
- Grid 布局：.parent { display: grid; align-items: center; }（现代浏览器优先）。
12. 如何实现元素在页面中上下左右居中？
核心是“相对于视口居中”，常用 4 种方案，按推荐度排序：
- Flex 布局（推荐）：body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .box
- 定位 +transform：.box
- Grid 布局：body
- 定位 +margin-auto：.box
注意：需给 body 设置 min-height: 100vh，确保占满视口高度。
13. 如何让 Chrome 浏览器显示小于 12px 的文字？
Chrome 默认最小字体为 12px，小于 12px 会自动放大为 12px，可通过 3 种方案突破限制：
- transform: scale()（推荐）：给文字元素设置 transform: scale(0.8)（0.8 为缩放比例，需根据目标字体大小调整），配合 transform-origin 控制缩放原点。 示例：.small-text
- 使用 SVG 文本：SVG 中的 text 标签支持任意大小字体，可嵌入 HTML 中。 示例：
- 修改 Chrome 配置（不推荐）：用户手动关闭“最小字体限制”（设置 → 外观 → 自定义字体 → 最小字体调整为“无”），但无法强制用户操作，仅用于本地测试。
推荐使用 scale 方案，无兼容性问题，不影响布局。
14. CSS 选择器有哪些，哪些属性可以继承，优先级如何计算？
（1）CSS 选择器分类（按常用度排序）
- 基础选择器：元素选择器（div）、ID 选择器（#id）、类选择器（.class）、通配符选择器（*）。
- 组合选择器：后代选择器（div .child）、子选择器（div > .child）、相邻兄弟选择器（div + .sibling）、通用兄弟选择器（div ~ .sibling）。
- 伪类选择器：:hover、:active、:focus、:nth-child()、:first-child、:last-child、:not()。
- 伪元素选择器：::before、::after、::first-line、::first-letter。
- 属性选择器：[attr]、[attr=value]、[attr^=value]（以 value 开头）、[attr$=value]（以 value 结尾）、[attr*=value]（包含 value）。
（2）可继承的 CSS 属性
仅文本相关、字体相关属性可继承，布局属性不可继承：
- 文本属性：color、font-size、font-family、font-weight、line-height、text-align、text-indent。
- 其他属性：cursor（鼠标样式）、visibility（可见性）。
不可继承属性：width、height、margin、padding、border、background、position、float 等。
（3）选择器优先级计算（权重从高到低）
- !important（最高优先级，覆盖所有选择器，慎用）。
- 内联样式（style 属性，权重 1000）。
- ID 选择器（#id，权重 100）。
- 类选择器、伪类选择器、属性选择器（.class/:hover/[attr]，权重 10）。
- 元素选择器、伪元素选择器（div/::before，权重 1）。
- 通配符选择器（*，权重 0）。
规则：权重叠加计算（如#id .class div 权重=100+10+1=111）；权重相同则后定义的选择器生效；继承的样式权重最低。
15. 网页中有大量图片加载很慢，有什么办法优化？
核心优化思路：“减小体积、减少请求、延迟加载、优化加载策略”，具体方案如下：
- 图片压缩与格式优化：优先使用 WebP 格式（比 JPG 小 50%）；压缩图片（tinypng 工具）；复杂图用 JPG，图标用 PNG/SVG。
- 延迟加载（懒加载）：用 loading="lazy"属性（原生），或 JS 实现“滚动到可视区域再加载”；非首屏图片优先懒加载。
- 预加载与预连接：首屏关键图片用 预加载；DNS 预解析（dns-prefetch）。
- 减少请求次数：小图标合并为雪碧图（CSS Sprite）；使用 CSS 图标/Font Awesome 替代图片图标。
- CDN 加速：图片部署到 CDN 服务器，就近获取资源，提升加载速度。
- 响应式图片：用 srcset+size 属性，根据屏幕尺寸加载不同尺寸图片（如
）。 - 其他优化：设置图片缓存（Cache-Control）；避免空 src 图片；图片懒加载时设置占位图，减少布局抖动。
16. 行内元素/块级元素有哪些？
（1）行内元素（inline）
特点：不独占一行，宽高由内容决定，不能设置 width/height，margin/padding 仅水平方向生效。
常见：、、、、、
（2）块级元素（block）
特点：独占一行，宽高可设置，margin/padding 水平垂直都生效，默认宽度为父元素 100%。
常见：
、
、
- 、
- 、
- 、