前端高频面试题1：HTML/CSS

本专栏相关链接

前端高频面试题1：HTML/CSS

前端高频面试题2：浏览器/计算机网络

前端高频面试题3：JavaScript

1.HTML5有哪些新特性？

1. 语义化标签

2. 媒体标签（<video>和<audio>）

3. 图形动画（Canvas和svg）

4. 表单增强

   1. 新输入类型：email、url、number、date、range、search 等。

   2. 新属性：

      • placeholder：输入框提示文本。

      • required：必填字段验证。

      • autocomplete：自动填充建议。

      • pattern：正则表达式验证。

5. 本地存储

   1. Web Storage：客户端存储数据，替代 Cookie。

      • localStorage：永久存储，直到手动清除。

      • sessionStorage：会话期间存储，关闭标签页后失效。

   2. IndexedDB：浏览器端非关系型数据库，支持大量数据存储。

6. 拖放 API

7. 通信与实时交互

   1. WebSocket：全双工通信协议，支持实时数据传输（如聊天应用）。

   2. WebRTC：浏览器间直接音视频通信（如视频会议）。

2.常见的语义化标签有哪些？语义化标签的好处？

• 语义化标签：

  • <header>、<footer>：页眉和页脚。

  • <nav>：导航栏。

  • <article>：独立内容块（如博客文章）。

  • <section>：文档中的逻辑分区。

  • <aside>：侧边栏或附加内容。

  • <main>：页面主要内容区域。

  • <figure> 和 <figcaption>：媒体内容及其标题。

• 好处：

  • 提升 SEO（搜索引擎优化）

  • 增强可访问性（Accessibility）

  • 提高代码可读性与维护性

3.为什么会出现margin塌陷？

• 设计初衷 CSS规范中设定Margin塌陷是为了简化内容排版。例如，段落（<p>）默认有上下外边距，若多个段落垂直排列，合并外边距可使间距更自然（如两个margin: 20px的段落间距仍为20px，而非40px）。

• 触发条件

  • 相邻兄弟元素：垂直排列的两个块级元素，上下边距相遇时合并。

  • 父元素与子元素：父元素无边框、内边距或内容阻隔时，第一个/最后一个子元素的margin可能与父元素的margin合并。

  • 空块级元素：无内容、内边距、边框的元素，上下边距会合并。

补充：Margin塌陷的规则

• 合并后的值：取两个margin中的较大值。若一正一负，则取两者之和；若均为负，取绝对值较大者。

• 仅限垂直方向：水平方向的外边距不会合并。

• 仅块级元素：行内元素、浮动元素、绝对定位元素不会触发。

---

4.如何解决margin塌陷？

• 添加阻隔

  • 给父元素设置border或padding（即使border: 1px solid transparent）。

  • 在相邻元素间添加内容或注释（如<div style="content: ''"></div>）。

• 触发BFC（块级格式化上下文） BFC会阻止内部元素与外部元素的Margin合并。触发方式：

  • 设置父元素overflow: hidden/auto。

  • 使用display: flow-root（推荐，无副作用）。

  • 设置float: left/right或position: absolute/fixed。

• 避免空元素 为空元素添加padding、height或最小高度min-height。

• 替代方案

  • 使用padding代替margin。

  • 使用Flex或Grid布局，避免传统盒模型的Margin合并。

5.使用css和js做动画有何优劣

实现原理

• CSS Transform/Animation

  • 浏览器优化机制：通过 CSS 的 transform 或 animation 实现的动画，浏览器会在合成器线程（Compositor Thread）中处理，跳过主线程的布局（Layout）和绘制（Paint）阶段。

  • 硬件加速：transform 和 opacity 属性的动画会被浏览器自动优化，触发 GPU 加速（通过 will-change 或 translateZ 进一步强化），生成独立的合成层（Composite Layer），避免重排（Reflow）和重绘（Repaint）。

  • 声明式语法：通过 @keyframes 或 transition 定义动画，浏览器自动插值计算中间帧。

• JavaScript 动画

  ---

  • 逐帧控制：通常通过 requestAnimationFrame 或定时器（如 setInterval）逐帧修改元素的属性（如 left、width 或 transform 值）。

  • 主线程依赖：大多数属性修改（如 width、margin）会触发重排和重绘，这些操作在主线程执行，可能被其他任务阻塞，导致卡顿。

  • 手动优化：开发者需要自行处理性能优化，例如批处理 DOM 操作、使用 transform 替代布局属性等。

性能对比

特性​​	​​CSS Transform/Animation​​	​​JavaScript 动画​​
​​线程执行​​	合成器线程（独立于主线程）	主线程（可能被阻塞）
​​重排/重绘​​	无（仅合成阶段）	可能触发（依赖修改的属性）
​​GPU 加速​​	自动优化	需手动触发（如使用 transform）
​​帧率稳定性​​	高（浏览器优化）	低（依赖代码质量）

优缺点对比

• CSS 动画的优点：

  • 高性能：浏览器自动优化，适合简单动画（如平移、旋转、缩放）。

  • 代码简洁：声明式语法实现动画更简单（如 transition: transform 0.3s ease）。

  • 流畅性：独立于主线程运行，不受 JavaScript 任务阻塞。

• CSS 动画的缺点：

  • 控制能力弱：难以实现复杂逻辑（如弹性动画、路径跟随）。

  • 调试困难：动态修改参数需要覆盖 CSS 类或内联样式。

• JavaScript 动画的优点：

  • 精细控制：适合复杂动画（如物理效果、逐帧滚动、游戏动画）。

  • 灵活交互：动态调整动画参数（如暂停、反转、实时响应事件）。

• JavaScript 动画的缺点：

  • 性能风险：不当使用易导致卡顿（如频繁修改布局属性）。

  • 开发成本高：需手动优化性能（如节流、缓存变量）。

 6.如何实现文本超出展示省略号

// 多行文本
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  line-clamp: 2; /* 标准属性，部分浏览器可能不支持 */
}

// 单行文本
.single-line {
  overflow: hidden;      /* 隐藏溢出内容 */
  white-space: nowrap;   /* 禁止文本换行 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
  width: 200px;         /* 必须设置宽度（或父级有宽度限制） */
}

7.deep在css中存在吗？

deep是一种vue语法糖，在原生css中不存在，具体写法如下

语法	推荐程度	兼容性	使用场景
/deep/	不推荐	已废弃	旧版 Vue
>>>	不推荐	已废弃	早期 CSS Modules
::v-deep	推荐	Vue 2 和 Vue 3 兼容	Vue 2 或向后兼容
:deep()	强烈推荐	Vue 3 标准	Vue 3

8.xhtml和html的区别

XHTML和HTML的主要区别在于语法严格性、文件扩展名、标签和属性要求以及应用场景等方面。

首先，语法严格性是两者最显著的区别之一。XHTML要求所有标签必须闭合，即使是空标签也需要闭合（例如<br>应写作<br/>），而HTML则相对宽松，某些情况下标签可以不闭合。此外，XHTML区分大小写，标签和属性名称必须使用小写，而HTML不区分大小写。XHTML的属性值必须用引号括起来，无论是单引号还是双引号都可以使用，而HTML则不需要。

其次，文件扩展名也不同。HTML文件的扩展名可以是.html或.htm，而XHTML文件的扩展名则是.xhtml、.xht或.xml。

在标签和属性要求方面，XHTML要求所有标签必须正确嵌套和闭合，标签名必须小写，属性值必须用引号括起来。例如，正确的XHTML代码是<img src="img.jpg" /> ，而错误的写法是<img src=img.jpg>。

最后，应用场景方面，XHTML更适合用于需要严格结构的应用，如XML处理工具，因为它符合XML规范。而HTML则适用于传统的Web浏览器解析，语法相对宽松，更适合快速开发和部署。

 9.script标签中defer和async的区别

• 默认情况：<script>标签会按照在HTML中的顺序执行，下载后同步加载脚本，阻塞页面加载和渲染

• async属性：脚本会异步下载并执行，不会阻塞页面加载和渲染，脚本下载完后立即执行，不管其在文档中的位置。

• defer属性：脚本也会异步下载，但不会立即执行，将在文档解析完成时，按照在文档中的顺序加载。

10.实现垂直居中布局

1.使用绝对定位，先设置top:50%和left:50%将元素左上角定位到页面的中心，然后再通过translate(-50%,-50%)来调整元素的中心点到页面的中心

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2.使用绝对定位，设置四个方向的值都为0，并设置margin:auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

3.使用绝对定位，先设置top:50%和left:50%将元素左上角定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px; 
}

4.使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

11.什么是盒模型

盒模型由margin、border、padding和content四个部分组成。

• 标准盒模型的width和height属性的范围只包含了content，
• IE盒模型的width和height属性的范围包含了border、padding和content

12.常见的定位有哪些（position的值可以是什么？）

1. 固定定位 fixed： 元素相对于浏览器窗口固定位置，即使页面滚动也不会移动。fixed 定位使元素脱离文档流，不占据空间，可能与其他元素重叠。
2. 相对定位 relative： 元素首先保留在文档流中的原始位置，然后可以相对于该位置进行偏移。无论是否移动，元素始终占据原始空间，移动时可能覆盖其他元素。
3. 绝对定位 absolute： 元素相对于最近的已定位父元素进行定位。若无定位父元素，则相对于 body 定位。absolute 定位同样使元素脱离文档流，不占据空间且可能与其他元素重叠。
4. 粘性定位 sticky： 元素首先按普通文档流定位，当到达特定阈值时转为固定定位。其定位参照为 flow root (BFC) 和最近的块级祖先元素。
5. 默认定位 static： 默认定位方式。元素遵循正常文档流，忽略 top、bottom、left、right 和 z-index 属性。

6. 继承父级 inherit：使元素继承父元素的 position 属性值。

13.flex布局的常用属性

1.flex-direction属性决定主轴的方向（即项目的排列方向）。

2.flex-wrap属性定义，如果一条轴线排不下，如何换行。

3.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4.justify-content属性定义了项目在主轴上的对齐方式。

5.align-items属性定义项目在交叉轴上如何对齐（单轴）。

6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

14.flex属性是由哪几个属性组成的，例如flex:1的含义是什么

flex属性是以下属性的简写

• flex-grow 增长规则
• flex-shrink  收缩规则
• flex-basis 初始大小

可以使用一个，两个或三个值来指定 flex 属性。

• 单值语法：值必须是以下之一：

  • 一个 <flex-grow> 的有效值：此时简写会扩展为 flex: <flex-grow> 1 0。
  • 一个 <flex-basis> 的有效值：此时简写会扩展为 flex: 1 1 <flex-basis>。
  • 关键字 none 或者全局关键字之一。

• 双值语法：

  • 第一个值必须是一个 flex-grow 的有效值。

  • 第二个值必须是以下之一：

    • 一个 flex-shrink 的有效值：此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0。
    • 一个 flex-basis 的有效值：此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>。

• 三值语法：值必须按照以下顺序指定：

  1. 一个 flex-grow 的有效值。
  2. 一个 flex-shrink 的有效值。
  3. 一个 flex-basis 的有效值

flex: 1的含义是当总宽（高）度大于所需宽（高）度时按1份的比例进行扩大，不足时按此比例缩小，一般用于flex布局时其余部分宽（高）度固定，用含有此属性的组件填充剩余宽（高）

15.隐藏一个元素有哪些方法

方式	是否占位	点击事件
diplay: none	×	×
visibility: hidden	√	×
opacity: 0	√	√
clip-path: circle(0)	√	×
position: absolute; top: -9999px;	×	√
position: absolute; z-index: -999;	×（不使用绝对定位时任然占位）	√（因为被覆盖通常不可点击）
transform: scale(0)	√	√