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）盒子组成（从内到外）

1. content（内容区）：存放元素内容（文字、图片等），宽高由 width/height 定义。
2. padding（内边距）：内容区与边框之间的距离，不占容器空间，会撑大盒子（默认模式下）。
3. border（边框）：包裹内边距和内容区，占容器空间。
4. 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"
  controls
  autoplay
  muted
  loop
>
  您的浏览器不支持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 { overflow: hidden; }                                                               | 代码简洁，无额外标签           | 会隐藏父元素超出部分的内容，不适合有定位元素的场景 |

| 父元素伪元素清除（推荐） | .parent::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } | 语义化好，无额外标签，兼容性强 | 代码稍多（可封装为公共类）                         |

| 父元素浮动               | .parent { float: left; }                                                                    | 简单，无额外代码               | 会导致父元素自身浮动，影响外层布局，连锁问题多     |

| 父元素设置 BFC           | .parent { overflow: auto; / display: flow-root; }                                           | 无副作用，布局稳定             | 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）水平居中

1. 行内/行内块子元素：父元素设置 text-align: center;
2. 块级子元素（固定宽度）：子元素设置 margin: 0 auto;
3. 任意子元素（Flex 布局）：父元素设置 display: flex; justify-content: center;

（2）垂直居中

1. 单行文本：父元素设置 line-height = 父元素 height;
2. 任意子元素（Flex 布局，推荐）：父元素设置 display: flex; align-items: center;
3. 任意子元素（定位 +transform）：父元素 relative，子元素 absolute; top: 50%; transform: translateY(-50%);

（3）水平垂直居中（常用 3 种方案）

• Flex 布局（推荐）：.parent { display: flex; justify-content: center; align-items: center; }
• 定位 +transform：.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
• Grid 布局（现代浏览器）：.parent { display: grid; place-items: center; }

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 种垂直居中方案，适配不同场景：

1. 单行文本：父元素 line-height = 父元素 height（如.parent { height: 50px; line-height: 50px; }）。
2. 多行文本：父元素 display: table-cell; vertical-align: middle;（兼容性好，需父元素设置 height）。
3. Flex 布局：.parent { display: flex; align-items: center; }（简洁，适配所有元素）。
4. 定位 +transform：.child { position: absolute; top: 50%; transform: translateY(-50%); }（无需知道子元素高度）。
5. margin-auto（定位场景）：.child { position: absolute; top: 0; bottom: 0; margin: auto 0; }（需父元素 relative）。
6. Grid 布局：.parent { display: grid; align-items: center; }（现代浏览器优先）。

12. 如何实现元素在页面中上下左右居中？

核心是“相对于视口居中”，常用 4 种方案，按推荐度排序：

1. Flex 布局（推荐）：body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .box { width: 200px; height: 200px; }
2. 定位 +transform：.box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; }
3. Grid 布局：body { display: grid; place-items: center; min-height: 100vh; margin: 0; }
4. 定位 +margin-auto：.box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; }

注意：需给 body 设置 min-height: 100vh，确保占满视口高度。

13. 如何让 Chrome 浏览器显示小于 12px 的文字？

Chrome 默认最小字体为 12px，小于 12px 会自动放大为 12px，可通过 3 种方案突破限制：

1. transform: scale()（推荐）：给文字元素设置 transform: scale(0.8)（0.8 为缩放比例，需根据目标字体大小调整），配合 transform-origin 控制缩放原点。 示例：.small-text { font-size: 10px; transform: scale(0.8); transform-origin: left center; }
2. 使用 SVG 文本：SVG 中的 text 标签支持任意大小字体，可嵌入 HTML 中。 示例：
3. 修改 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）选择器优先级计算（权重从高到低）

1. !important（最高优先级，覆盖所有选择器，慎用）。
2. 内联样式（style 属性，权重 1000）。
3. ID 选择器（#id，权重 100）。
4. 类选择器、伪类选择器、属性选择器（.class/:hover/[attr]，权重 10）。
5. 元素选择器、伪元素选择器（div/::before，权重 1）。
6. 通配符选择器（\*，权重 0）。

规则：权重叠加计算（如#id .class div 权重=100+10+1=111）；权重相同则后定义的选择器生效；继承的样式权重最低。

15. 网页中有大量图片加载很慢，有什么办法优化？

核心优化思路：“减小体积、减少请求、延迟加载、优化加载策略”，具体方案如下：

1. 图片压缩与格式优化：优先使用 WebP 格式（比 JPG 小 50%）；压缩图片（tinypng 工具）；复杂图用 JPG，图标用 PNG/SVG。
2. 延迟加载（懒加载）：用 loading="lazy"属性（原生），或 JS 实现“滚动到可视区域再加载”；非首屏图片优先懒加载。
3. 预加载与预连接：首屏关键图片用预加载；DNS 预解析（dns-prefetch）。
4. 减少请求次数：小图标合并为雪碧图（CSS Sprite）；使用 CSS 图标/Font Awesome 替代图片图标。
5. CDN 加速：图片部署到 CDN 服务器，就近获取资源，提升加载速度。
6. 响应式图片：用 srcset+size 属性，根据屏幕尺寸加载不同尺寸图片（如 ）。
7. 其他优化：设置图片缓存（Cache-Control）；避免空 src 图片；图片懒加载时设置占位图，减少布局抖动。

16. 行内元素/块级元素有哪些？

（1）行内元素（inline）

特点：不独占一行，宽高由内容决定，不能设置 width/height，margin/padding 仅水平方向生效。

常见：、 、 、 、 、