某IT培训班一阶段前端面试题

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）视频标签

html 复制代码

&lt;video 
  src="video.mp4"  <!-- 视频地址 -->
  controls        <!-- 显示默认播放控件（播放/暂停、音量等） -->
  autoplay        <!-- 自动播放（需配合muted静音，否则多数浏览器禁止） -->
  muted           <!-- 静音播放 -->
  loop            <!-- 循环播放 -->
  poster="poster.jpg"  <!-- 视频加载前显示的封面图 -->
  width="600"     <!-- 视频宽度 -->
  preload="auto"  <!-- 预加载策略（auto：自动预加载；none：不预加载） -->
>
  您的浏览器不支持video标签，请升级浏览器 <!-- 降级提示 -->
</video>

（2）音频标签

html 复制代码

<audio 
  src="audio.mp3"
  controls
  autoplay
  muted
  loop
>
  您的浏览器不支持audio标签，请升级浏览器
</audio>

注意：autoplay 属性在 Chrome、Safari 等浏览器中，需配合 muted 才能生效，避免自动播放打扰用户。

4. HTML5 新增的内容有哪些？

HTML5 核心新增内容分 5 大类，重点解决旧版 HTML 功能缺失、兼容性差的问题：

语义化标签 ：、、、、、、，增强页面结构可读性、SEO 友好。
媒体标签：、（原生音视频播放）、（画布，用于绘图）。
表单增强：新增 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）水平居中

行内/行内块子元素：父元素设置 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 { 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 种垂直居中方案，适配不同场景：

单行文本：父元素 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 { width: 200px; height: 200px; }
定位 +transform：.box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; }
Grid 布局：body { display: grid; place-items: center; min-height: 100vh; margin: 0; }
定位 +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 种方案突破限制：

**transform: scale()（推荐）**：给文字元素设置 transform: scale(0.8)（0.8 为缩放比例，需根据目标字体大小调整），配合 transform-origin 控制缩放原点。示例：.small-text { font-size: 10px; transform: scale(0.8); transform-origin: left center; }
使用 SVG 文本 ：SVG 中的 text 标签支持任意大小字体，可嵌入 HTML 中。示例：小于 12px 文字
**修改 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 仅水平方向生效。

常见：、、、、**、、（inline-block）、（inline-block）。****

（2）块级元素（block）

特点：独占一行，宽高可设置，margin/padding 水平垂直都生效，默认宽度为父元素 100%。

常见：
、

、、

、
1. 、
2. 、、、、。

（3）行内块元素（inline-block）

特点：不独占一行，可设置 width/height，margin/padding 全生效（结合行内和块级优点），常见：、、、。

转换：通过 display: inline/block/inline-block 可互相转换。

17. 讲讲浏览器的标准模式和怪异模式

浏览器渲染模式由 DOCTYPE 声明决定，核心影响 CSS 盒子模型、布局兼容性：

模式	触发条件	渲染规则	特点
标准模式（Standards Mode）	页面开头有正确的 DOCTYPE 声明（如）	遵循 W3C 标准渲染，box-sizing 默认 content-box	布局规范，兼容性好，所有现代浏览器默认优先
怪异模式（Quirks Mode）	无 DOCTYPE 声明，或 DOCTYPE 声明错误/不完整	模拟 IE6/7 渲染方式，box-sizing 默认 border-box，布局有兼容性问题	布局混乱，易出现兼容性 bug，需避免

结论：必须在 HTML 文件开头添加，强制浏览器进入标准模式。

18. margin 和 padding 在什么场合下使用？

核心区别：margin 是"盒子外部间距"（与其他盒子的距离），padding 是"盒子内部间距"（内容与边框的距离），使用场景划分：

（1）使用 margin 的场景

控制元素与其他元素的间距（如列表项之间的间距、卡片之间的间距）。
元素水平居中（块级元素 margin: 0 auto）。
清除元素默认间距（如 body、ul 的默认 margin）。
注意：margin 会产生折叠（相邻元素垂直 margin 重叠），需避免或解决。

（2）使用 padding 的场景

控制元素内容与边框的距离（如按钮内部文字与边框的间距、卡片内容与卡片边缘的间距）。
给元素"增加点击区域"（如小图标按钮，通过 padding 扩大点击范围）。
配合背景色/边框，实现内部留白（如输入框内部留白）。

原则："外间距用 margin，内间距用 padding"，避免混用导致布局混乱。

19. 简述弹性盒子布局属性都有哪些？

Flex 布局核心分"容器属性"（父元素）和"项目属性"（子元素），容器需先设置 display: flex/inline-flex：

（1）容器属性（父元素）

flex-direction：设置主轴方向（row：水平默认；column：垂直；row-reverse/column-reverse：反向）。
justify-content：主轴对齐方式（flex-start：默认左对齐；center：居中；flex-end：右对齐；space-between：两端对齐；space-around：均匀分布）。
align-items：交叉轴对齐方式（flex-start：上对齐；center：居中；flex-end：下对齐；stretch：拉伸默认；baseline：基线对齐）。
flex-wrap：是否换行（nowrap：默认不换行；wrap：换行；wrap-reverse：反向换行）。
align-content：多根轴线对齐方式（仅换行时生效，同 justify-content 类似）。
flex-flow：flex-direction + flex-wrap 简写（如 flex-flow: row wrap;）。

（2）项目属性（子元素）

flex-grow：项目放大比例（默认 0，不放大；1：占满剩余空间；数值越大，占比越大）。
flex-shrink：项目缩小比例（默认 1，空间不足时缩小；0：不缩小）。
flex-basis：项目在主轴上的基准宽度（默认 auto，即项目自身宽度）。
flex：flex-grow + flex-shrink + flex-basis 简写（如 flex: 1 0 200px; 常用 flex:1 表示占满剩余空间）。
align-self：单独设置项目的交叉轴对齐方式（覆盖父元素 align-items）。
order：项目排列顺序（默认 0，数值越小，越靠前）。

20. 怎么实现标签的禁用？

分"表单元素禁用"和"普通元素禁用"，核心方案如下：

（1）表单元素禁用（原生支持 disabled 属性）

适用于、、、等：

html 复制代码

<button disabled>禁用按钮</button>
<input type="text" disabled value="禁用输入框">
<select disabled>
  <option>禁用下拉框</option>
</select>

特点：禁用后不可点击/输入，样式默认变灰，表单提交时不会携带该元素值。

（2）普通元素禁用（如 div、a 标签）

需通过 CSS+JS 实现，禁止点击和交互：

css 复制代码

.disabled {
  pointer-events: none; /* 禁止鼠标事件（点击、hover等） */
  cursor: not-allowed; /* 鼠标变为禁止样式 */
  opacity: 0.6; /* 透明度降低，提示禁用 */
  user-select: none; /* 禁止选中文字 */
}

html 复制代码

<div class="disabled">禁用的div</div>
<a href="#" class="disabled">禁用的链接</a>

注意：pointer-events: none 会禁止所有鼠标事件，若需保留部分交互，需配合 JS 阻止事件冒泡。

21. Flex 布局原理

Flex（弹性盒子）布局核心是"通过容器和项目的属性，控制项目在主轴和交叉轴上的排列、缩放、对齐"，原理如下：

父元素设置 display: flex 后，成为 Flex 容器，子元素自动成为 Flex 项目，默认沿水平主轴排列。
Flex 布局有两条轴：主轴（默认水平，由 flex-direction 控制）和交叉轴（默认垂直，与主轴垂直）。
项目默认不换行（flex-wrap: nowrap），空间不足时会自动缩小（flex-shrink: 1），空间充足时不会自动放大（flex-grow: 0）。
通过 justify-content 控制项目在主轴的对齐方式，align-items 控制项目在交叉轴的对齐方式。
项目的 flex 属性（grow/shrink/basis）决定其在容器中的缩放比例和基准宽度，实现自适应布局。

核心优势：无需浮动、定位，即可快速实现元素居中、自适应、均匀分布等布局，兼容性覆盖所有现代浏览器。

22. px 和 rem 的区别

px 和 rem 都是 CSS 长度单位，核心区别在于"是否跟随根元素字体大小变化"：

单位	定义	是否自适应	使用场景	优缺点
px	像素，固定长度单位，1px=屏幕 1 个物理像素	否（固定大小）	固定尺寸元素（如边框、图标大小、按钮固定宽高）	优点：精准可控；缺点：不支持响应式，不同屏幕尺寸下显示效果不一致
rem	相对单位，1rem=根元素（html）的 font-size 大小	是（跟随根元素字体大小变化）	响应式布局（如文字大小、容器宽高、间距）	优点：适配不同屏幕，响应式友好；缺点：需设置根元素 font-size，计算稍复杂

移动端常用方案：html { font-size: 100px; }（1rem=100px），配合媒体查询动态调整根元素 font-size。

23. 网页的三层结构有哪些？

网页三层结构是前端开发的核心规范，分别负责"结构、样式、行为"，相互分离、各司其职：

**结构层（HTML）**：HyperText Markup Language（超文本标记语言），负责定义网页的内容和结构（如文字、图片、列表、表单），是网页的骨架。核心要求：语义化、结构化，不掺杂样式和行为。
**样式层（CSS）**：Cascading Style Sheets（层叠样式表），负责定义网页的外观和布局（如颜色、字体、间距、定位），是网页的皮肤。核心要求：与 HTML 分离，通过选择器控制元素样式。
**行为层（JS）**：JavaScript，负责定义网页的交互逻辑（如点击事件、动画效果、数据请求），是网页的灵魂。核心要求：与 HTML/CSS 分离，通过 DOM 操作实现交互。

分离优势：代码易维护、可复用，便于多人协作，提升开发效率。

24. 请简述媒体查询

媒体查询（Media Query）是 CSS3 核心特性，用于"根据设备特性（屏幕尺寸、分辨率、设备类型）动态切换样式"，实现响应式布局。

（1）核心语法

css 复制代码

/* 语法结构 */
@media 媒体类型 and (媒体特性) {
  /* 满足条件时生效的CSS样式 */
  选择器 {
    属性: 值;
  }
}

（2）常用媒体类型

all：所有设备（默认）。
screen：屏幕设备（电脑、手机、平板）。
print：打印设备。

（3）常用媒体特性

max-width：屏幕宽度小于等于指定值（如 max-width: 768px，适配移动端）。
min-width：屏幕宽度大于等于指定值（如 min-width: 1200px，适配桌面端）。
orientation：屏幕方向（portrait：竖屏；landscape：横屏）。
device-pixel-ratio：设备像素比（如 device-pixel-ratio: 2，适配高清屏）。

（4）示例（响应式布局）

css 复制代码

/* 桌面端默认样式（屏幕>1200px） */
.container { width: 1200px; margin: 0 auto; }

/* 平板端（768px<屏幕≤1200px） */
@media screen and (max-width: 1200px) {
  .container { width: 90%; }
}

/* 移动端（屏幕≤768px） */
@media screen and (max-width: 768px) {
  .container { width: 100%; padding: 0 10px; }
}

注意：需配合，确保媒体查询在移动端生效。

25. rem 的缺点

rem 作为响应式单位虽常用，但存在 3 个核心缺点：

依赖根元素 font-size：rem 大小由 html 标签 font-size 决定，若未正确设置根元素字体大小，会导致布局错乱；第三方组件可能修改根元素 font-size，引发冲突。
计算繁琐：需将设计稿尺寸换算为 rem（如设计稿 750px，1rem=100px，20px=0.2rem），需手动计算或借助工具（如 postcss-px-to-viewport）。
兼容性与异常场景 ：
1. 旧版浏览器（IE8 及以下）不支持 rem。
2. 用户手动调整浏览器字体大小，会导致 rem 尺寸变化，破坏布局（如用户设置超大字体，按钮会被撑变形）。
3. 嵌套组件中，若父元素设置 font-size，可能导致 rem 计算混乱（需确保仅根元素控制 rem）。

替代方案：移动端可用 vw/vh 单位，无需设置根元素 font-size，更适配响应式。

26. 在移动端中怎么配置像素比例？

像素比例（devicePixelRatio，dpr）是"设备物理像素与逻辑像素的比值"（如高清屏 dpr=2，1 逻辑像素=2 物理像素），移动端配置核心是"让页面在不同 dpr 设备上显示清晰"，方案如下：

（1）viewport 配置（核心）

通过 meta 标签设置 viewport，适配 dpr：

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

width=device-width：让页面宽度等于设备逻辑宽度。
initial-scale=1.0：初始缩放比例为 1。
user-scalable=no：禁止用户缩放（避免布局错乱）。

（2）高清图适配（dpr>1 设备）

根据 dpr 加载不同尺寸图片，避免图片模糊：

Plain 复制代码

<img src="img@1x.jpg" 
     srcset="img@1x.jpg 1x, img@2x.jpg 2x, img@3x.jpg 3x" 
     alt="高清图">

srcset 属性按 dpr 匹配图片：dpr=1 加载 @1x 图，dpr=2 加载 @2x 图，dpr=3 加载 @3x 图，保证图片清晰。

（3）CSS 适配（高清屏边框/阴影）

dpr>1 时，1px 边框会显示为 2px（模糊），需通过 transform 缩放实现高清 1px 边框：

css 复制代码

/* 高清1px下边框 */
.border-bottom {
  position: relative;
}
.border-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #eee;
  transform: scaleY(0.5); /* dpr=2时缩放0.5，等价1px物理像素 */
  transform-origin: bottom center;
}

（4）JS 动态配置（可选）

通过 JS 获取 dpr，动态设置 viewport 缩放比，适配更精准：

Plain 复制代码

// 获取设备dpr
const dpr = window.devicePixelRatio || 1;
// 设置viewport缩放比为1/dpr
const meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = `width=device-width, initial-scale=${1/dpr}, maximum-scale=${1/dpr}, minimum-scale=${1/dpr}, user-scalable=no`;
document.head.appendChild(meta);

27. 常见的兼容性处理有哪些？

核心适配"浏览器差异（IE/Chrome/Safari）"和"设备差异"，常用处理方案如下，覆盖 HTML、CSS、JS 全场景：

（1）CSS 兼容性处理

浏览器前缀适配：针对新特性添加厂商前缀，兼容旧版浏览器 -webkit-（Chrome/Safari）、-moz-（Firefox）、-ms-（IE）、-o-（Opera）示例：.box { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
IE 专属 hack： - IE6/7：*zoom: 1;（触发 hasLayout，解决浮动、margin 塌陷问题） - IE8：\0 前缀（.box { color: red\0; }） - IE9-：（条件注释）
特性兼容降级： - IE8 及以下不支持 flex/rem，降级为 float/px 布局 - IE 不支持 opacity，用 filter: alpha(opacity=80);（80 对应透明度 80%） - Safari 不支持 background-clip: text，需添加-webkit-前缀并配合-webkit-text-fill-color: transparent

（2）HTML 兼容性处理

必须添加正确 DOCTYPE（），避免 IE 进入怪异模式
IE8 及以下不支持 HTML5 语义化标签（header/nav/article 等），需通过 JS 创建并设置 display: block 示例：document.createElement('header'); document.createElement('nav');
移动端添加 viewport 标签，适配不同设备尺寸，避免页面缩放错乱

（3）JS 兼容性处理

事件绑定兼容：IE8 及以下用 attachEvent，现代浏览器用 addEventListener 示例：if (ele.attachEvent) { ele.attachEvent('onclick', fn); } else { ele.addEventListener('click', fn); }
DOM 选择器兼容：IE8 及以下不支持 querySelector/querySelectorAll，改用 getElementById/getElementsByTagName
JSON 兼容：IE8 及以下不支持 JSON.parse/JSON.stringify，需引入 json2.js 垫片文件
ES6 语法兼容：用 Babel 将 ES6+ 语法转 ES5，适配旧浏览器

（4）工具辅助兼容

引入 autoprefixer（自动添加 CSS 前缀）、postcss（CSS 兼容性处理）、babel-polyfill（补充 ES6+API），减少手动兼容成本。

28. 元素垂直和水平居中的方式（整合高频面试方案）

按"兼容性优先级 + 简洁度"排序，分 4 类核心方案，覆盖所有场景（行内/块级/任意元素）：

Flex 布局（推荐，现代浏览器）.parent { display: flex; justify-content: center; align-items: center; } 优势：无需知道子元素宽高，适配所有元素（行内、块级、浮动），代码极简；缺点：IE8 及以下不支持，需降级。
定位 +transform（无兼容风险，适配全场景）.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 优势：无需知道子元素宽高，支持任意元素，IE9+ 支持；缺点：IE8 及以下不支持 transform，需搭配其他方案。
定位 +margin-auto（需知子元素宽高）.parent { position: relative; } .child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 200px; height: 200px; margin: auto; } 优势：兼容性好（IE8+ 支持），布局稳定；缺点：必须设置子元素固定宽高，灵活性低。
传统方案（针对性场景）- 单行文本：.parent { line-height: 父元素高度; text-align: center; }（如.parent { height: 50px; line-height: 50px; text-align: center; }） - 块级元素（固定宽高）：.child { width: 200px; margin: 0 auto; }（仅水平居中） - 表格布局：.parent { display: table-cell; vertical-align: middle; text-align: center; }（兼容性好，IE8+ 支持，适合多行文本）

29. 怎么实现三栏布局，两边固定中间自适应？

3 种常用方案，按推荐度、兼容性排序，覆盖面试高频考点：

**Flex 布局（推荐，简洁无副作用）**HTML：
CSS： .container { display: flex; min-height: 100vh; } .left { width: 200px; background: #f0f0f0; } /* 左边固定宽度 */ .right { width: 200px; background: #f0f0f0; } /* 右边固定宽度 */ .center { flex: 1; background: #fff; } /* 中间自适应，占满剩余空间 */ 优势：代码极简，无浮动/定位问题，支持中间高度自适应（跟随父元素），现代浏览器优先；缺点：IE8 及以下不支持。
**浮动布局（兼容性好，经典方案）**CSS： .container { overflow: hidden; } /* 清除浮动，避免父元素高度坍塌 */ .left { width: 200px; float: left; background: #f0f0f0; } .right { width: 200px; float: right; background: #f0f0f0; } .center { margin: 0 200px; background: #fff; } /* 中间 margin 值等于左右固定宽度 */ 优势：兼容性好（IE6+ 支持），适配旧浏览器；缺点：需清除浮动，中间内容需放在 HTML 结构最后，不支持中间高度自适应（需手动设置）。
**定位布局（精准控制，特殊场景）**CSS： .container { position: relative; min-height: 100vh; } .left { width: 200px; position: absolute; left: 0; top: 0; background: #f0f0f0; } .right { width: 200px; position: absolute; right: 0; top: 0; background: #f0f0f0; } .center { margin: 0 200px; background: #fff; } 优势：布局稳定，适合需要固定左右位置的场景（如侧边栏不跟随滚动）；缺点：中间内容高度超过左右时会溢出，需额外设置 overflow 或高度。

30. doctype 的作用

DOCTYPE（文档类型声明）是 HTML 文件开头的必选指令，核心作用的是"指定 HTML 版本、触发浏览器渲染模式、保证布局兼容性"，具体如下：

指定 HTML 版本规范：告诉浏览器当前页面使用的 HTML 标准（如对应 HTML5，旧版如对应 HTML4.01），浏览器按对应规范解析标签。
**触发浏览器渲染模式（核心作用）**： - 有正确 DOCTYPE（如）：浏览器进入"标准模式"，严格按 W3C 规范渲染页面（布局、盒子模型、样式解析均遵循标准）。 - 无 DOCTYPE/DOCTYPE 错误/不完整：浏览器进入"怪异模式"，模拟 IE6/7 的渲染方式，导致盒子模型解析异常、布局错乱（如 width 包含 padding 和 border）。
提升跨浏览器兼容性：让不同浏览器（Chrome、Firefox、IE 等）按统一标准渲染页面，减少因渲染规则差异导致的兼容性 bug。

注意：DOCTYPE 声明必须放在 HTML 文件第一行，无任何前置空格、注释或标签，否则会失效，浏览器可能进入怪异模式。

31. 常见的浏览器内核有哪些？

浏览器内核（又称渲染引擎）负责解析 HTML/CSS、渲染页面、处理布局，是浏览器的核心组件，常见内核及对应浏览器如下（按市场占有率排序）：

内核名称	所属厂商	对应浏览器	核心特点
Blink（ blink ）	Google + Opera	Chrome、Opera、新版 Edge、360 极速浏览器、QQ 浏览器	渲染速度快，支持 HTML5/CSS3 新特性多，基于 WebKit 分支开发，兼容性好
WebKit	Apple	Safari、老版 Edge、iOS 自带浏览器、macOS 自带浏览器	渲染流畅，对移动端适配友好，兼容性稳定，开源
Gecko	Mozilla	Firefox（火狐）	开源，扩展性强，对 W3C 标准支持度极高，安全性好
Trident（三叉戟）	Microsoft	IE 浏览器（IE6-IE11）、老版 Edge（EdgeHTML 是其分支）	兼容性差，对新特性支持滞后，已被微软淘汰，仅用于旧系统兼容
Presto（ presto ）	Opera	旧版 Opera（12 及以下版本）	渲染速度极快，已停止维护，被 Blink 内核替代

补充：前端开发需重点适配 Blink、WebKit、Gecko 内核，Trident 内核仅需兼容 IE11（旧项目）。

32. link 和 import 的区别

两者均用于引入 CSS 文件，但本质、加载机制、兼容性差异较大，核心区别如下（面试高频考点）：

对比维度	link	@import
本质	HTML 标签，不属于 CSS 语法范畴	CSS 语法规则，只能在 CSS 文件/Style 标签中使用
加载顺序	与 HTML 文档同步加载，不阻塞 HTML 解析（仅 CSSOM 构建阻塞页面渲染）	需等待父 CSS 文件加载、解析完成后，才会加载导入的 CSS 文件，存在加载阻塞
兼容性	所有浏览器都支持（包括 IE6+）	IE8 及以下浏览器不支持，兼容性较差
功能范围	除引入 CSS 外，还可引入图标（rel="icon"）、预加载（rel="preload"）、DNS 预解析（rel="dns-prefetch"）、引入 RSS 等	仅能引入 CSS 文件，无其他扩展功能
DOM 操作	可通过 JS 动态创建 link 标签，实现 CSS 的动态加载（如切换主题）	属于 CSS 语法，无法通过 JS 动态操作（DOM 无法识别 @import 规则）
嵌套支持	支持嵌套引入（link 引入的 CSS 中可再用 @import），但不推荐（影响加载性能）	IE6-7 不支持 @import 嵌套，其他浏览器支持有限

结论：优先使用 link 标签引入 CSS，兼容性好、加载性能优、功能全面；@import 仅用于特殊场景（如 CSS 模块化嵌套），需注意兼容性。

33. BFC（块级格式上下文）触发条件

BFC（Block Formatting Context，块级格式上下文）是一个独立的渲染区域，内部元素的布局不受外部元素影响，外部元素也不受内部元素影响，核心作用是"解决浮动塌陷、margin 重叠、元素被浮动覆盖"问题。

（1）触发 BFC 的 6 个核心条件（满足其一即可，面试必背）

根元素（html 标签）默认是 BFC（页面最外层的 BFC 容器）。
元素设置 float 属性（值为 left/right，不包括 none）。
元素设置 position 属性（值为 absolute/fixed，即脱离文档流的定位）。
元素设置 display 属性（值为 inline-block、flex、grid、table-cell、flow-root）。
元素设置 overflow 属性（值为 auto、hidden、scroll，不包括默认值 visible）。
元素设置 contain 属性（值为 layout、paint、content，用于隔离渲染）。

（2）BFC 的 3 个核心作用（面试高频）

解决父元素高度坍塌：浮动元素会脱离文档流，导致父元素高度为 0，给父元素触发 BFC 即可让父元素包裹浮动子元素（如.parent { overflow: hidden; }）。
解决相邻元素垂直 margin 重叠：两个相邻的块级元素，垂直方向的 margin 会取最大值（重叠），给其中一个元素触发 BFC 即可避免重叠（如给元素添加 overflow: hidden;）。
阻止元素被浮动元素覆盖：如文字环绕图片时，文字会被浮动图片挤压，给文字容器触发 BFC 即可让文字容器与浮动图片并排显示，不被覆盖。

注意：触发 BFC 时优先选择 overflow: auto（无副作用）或 display: flow-root（专门触发 BFC，无副作用），避免使用 overflow: hidden（会隐藏超出内容）。

34. CSS 实现边框三角形

核心原理：利用 CSS 边框的"梯形特性"------当元素宽高为 0 时，边框会呈现梯形，将其中 3 个边框设为透明，仅保留 1 个边框作为三角形，常用 2 种方案（面试必背）：

（1）基础三角形（向上/下/左/右，无边框）

核心：宽高设为 0，3 个边框透明，1 个边框设为目标颜色，调整边框宽度控制三角形大小。

Plain 复制代码

/* 向下的三角形（箭头朝下，核心示例） */
.triangle-down {
  width: 0;
  height: 0;
  /* 左右边框透明，下边框为目标颜色 */
  border-left: 50px solid transparent;  /* 左侧边框宽度=三角形底边长的一半 */
  border-right: 50px solid transparent; /* 右侧边框宽度=三角形底边长的一半 */
  border-bottom: 50px solid #ff0000;    /* 下边框=三角形高度+颜色 */
  border-top: 0; /* 清除上边框，可选 */
}

方向调整（举一反三）： - 向上三角形：border-bottom 透明，保留 border-top（border-top: 50px solid #ff0000;） - 向左三角形：border-right 透明，保留 border-left（border-left: 50px solid #ff0000;） - 向右三角形：border-left 透明，保留 border-right（border-right: 50px solid #ff0000;）

（2）带边框的三角形（特殊需求，面试拓展）

核心：通过两个嵌套的三角形叠加，外层三角形为边框颜色，内层三角形为主体颜色，微调位置露出边框。

Plain 复制代码

/* 带白色边框的红色向下三角形 */
.triangle-border {
  position: relative;
  width: 0;
  height: 0;
  /* 外层三角形（边框颜色，稍大） */
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #ff0000; /* 主体颜色 */
}
.triangle-border::after {
  content: "";
  position: absolute;
  top: 1px; /* 向上微调1px，露出外层边框 */
  left: -49px; /* 向左微调1px，对齐外层 */
  width: 0;
  height: 0;
  /* 内层三角形（背景颜色，稍小） */
  border-left: 49px solid transparent;
  border-right: 49px solid transparent;
  border-bottom: 49px solid #fff; /* 边框颜色（与父容器背景一致） */
}

补充：三角形大小由边框宽度决定，边框宽度越大，三角形越大；颜色可自由调整，适配不同场景。

35. viewport 的作用

viewport（视口）是"浏览器显示页面内容的区域"，核心作用是"适配移动端设备"，解决移动端页面"缩放异常、布局错乱、显示模糊"问题，通过 meta 标签配置（移动端开发必写）。

（1）核心配置代码（标准写法）

Plain 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

（2）各属性含义（面试必背）

width=device-width：将视口宽度设置为设备的"逻辑宽度"（而非物理宽度），适配不同尺寸的移动端设备（如手机、平板）。
initial-scale=1.0：设置页面初始缩放比例为 1（页面默认不缩放，1:1 显示）。
maximum-scale=1.0：设置页面最大缩放比例为 1，禁止用户手动放大页面。
minimum-scale=1.0：设置页面最小缩放比例为 1，禁止用户手动缩小页面。
user-scalable=no：明确禁止用户通过手势缩放页面（避免缩放导致布局错乱，部分浏览器需配合 max/min-scale 生效）。

（3）核心作用（面试高频）

适配移动端屏幕：让页面宽度跟随设备宽度变化，避免页面过宽出现横向滚动条，或过窄导致内容拉伸。
保证页面显示清晰：避免移动端浏览器默认按"980px 宽"渲染页面（导致页面缩小、文字模糊），让页面按设备实际宽度 1:1 渲染。
配合响应式布局：确保媒体查询（@media）按设备实际宽度生效，实现"不同设备显示不同布局"。

注意：若不设置 viewport 标签，移动端浏览器会默认使用"980px 宽的视口"渲染页面，导致页面布局错乱，因此移动端开发必须添加 viewport 配置。

拓展：设置的像素宽度在苹果设备上显示不足怎么处理？

苹果设备（iPhone/iPad）因「视网膜屏（dpr>1）」「Safari 默认样式」「视口适配差异」，常出现"设置的像素宽度显示不足、内容被截断或留白异常"，核心原因是「物理像素与逻辑像素不匹配」「Safari 默认边距/缩放干扰」，针对性解决方案如下：

（1）核心：精准配置 viewport，适配苹果 dpr 特性

苹果设备 dpr 多为 2（普通视网膜屏）或 3（Pro 系列），仅设置 width=device-width 不够，需通过 JS 动态调整 viewport 缩放比，让逻辑像素与物理像素对齐：

Plain 复制代码

// 苹果设备适配核心代码（兼容所有dpr）
const dpr = window.devicePixelRatio || 1;
const meta = document.createElement('meta');
meta.name = 'viewport';
// 关键：缩放比=1/dpr，保证1逻辑像素=1物理像素，避免宽度显示不足
meta.content = `width=device-width, initial-scale=${1/dpr}, maximum-scale=${1/dpr}, minimum-scale=${1/dpr}, user-scalable=no`;
// 优先替换现有viewport，避免重复
const existingMeta = document.querySelector('meta[name="viewport"]');
if (existingMeta) {
  document.head.replaceChild(meta, existingMeta);
} else {
  document.head.appendChild(meta);
}

补充：苹果 Safari 对 initial-scale=1.0 的解析更严格，动态设置 1/dpr 缩放比，可解决"设置 width=375px（iPhone SE 逻辑宽）但显示仍不足"的问题。

（2）清除苹果 Safari 默认边距与样式干扰

苹果 Safari 默认给 body 添加 8px 边距，且有"滚动回弹""默认字体大小"等特性，会导致设置的宽度被压缩，需全局重置样式：

Plain 复制代码

/* 苹果设备专属样式重置（全局生效） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免padding撑大宽度 */
}
body {
  margin: 0 !important; /* 清除Safari默认8px边距 */
  -webkit-font-smoothing: antialiased; /* 优化苹果字体显示 */
  -webkit-text-size-adjust: 100%; /* 禁止苹果自动调整字体大小 */
}
/* 禁止Safari滚动回弹（可选，避免布局偏移） */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

（3）宽度单位优先用 rem/vw，替代固定 px

苹果设备不同机型逻辑宽度不同（如 iPhone 14 为 390px，iPhone SE 为 375px），固定 px 宽度易出现"小屏显示不足、大屏留白"，优先用响应式单位：

rem 方案 ：按苹果设备逻辑宽度设置根元素 font-size（如 375px 屏设 1rem=50px），配合媒体查询适配不同机型：// JS动态设置根元素font-size（适配苹果不同机型） ``function setRem() { `` const clientWidth = document.documentElement.clientWidth;`` // 苹果设备逻辑宽度区间：320px（旧iPhone）~ 428px（iPhone 15 Pro Max）`` const baseSize = Math.min(clientWidth, 428) / 7.5; // 7.5为设计稿750px的缩放系数`` document.documentElement.style.fontSize = baseSize + 'px';``} ``setRem(); ``window.addEventListener('resize', setRem);
**vw 方案（更推荐苹果设备）**：1vw=视口宽度的 1%，无需设置根元素 font-size，直接适配：/* 示例：苹果设备375px屏，200px宽度=53.33vw（200/375*100） */ ``.container { `` width: 53.33vw; /* 等价375px屏的200px，自动适配不同苹果机型 */`` max-width: 428px; /* 限制最大宽度，避免大屏过宽 */`` margin: 0 auto;``}

（4）特殊场景：解决苹果横屏宽度显示不足

苹果设备横屏时，Safari 会保留底部工具栏，导致实际可用宽度小于设备逻辑宽度，需额外适配：

Plain 复制代码

/* 横屏适配：苹果设备横屏时增加内边距，避免内容被工具栏遮挡 */
@media screen and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    padding-bottom: 44px !important; /* 适配苹果底部工具栏高度 */
  }
  .container {
    width: 95vw !important; /* 预留工具栏空间，避免宽度不足 */
  }
}

（5）验证方案：苹果设备真机测试技巧

用 Safari 开发者工具（macOS）连接 iPhone/iPad，实时查看元素宽度与布局；
重点测试 iPhone SE（375px）、iPhone 14（390px）、iPad mini（768px），覆盖苹果主流逻辑宽度；
避免使用 fixed 定位占满宽度，优先用 flex/grid 布局，适配苹果屏幕伸缩特性。

核心总结：苹果设备宽度显示不足，本质是「dpr 适配不当 +Safari 默认样式干扰」，优先通过"动态 viewport+ 响应式单位 + 样式重置"解决，无需额外修改固定像素逻辑，兼顾兼容性与显示效果。