目录
1.为什么会出现margin塌陷？
设计初衷 CSS规范中设定Margin塌陷是为了简化内容排版。例如，段落（
<p>）默认有上下外边距，若多个段落垂直排列，合并外边距可使间距更自然（如两个margin: 20px的段落间距仍为20px，而非40px）。触发条件
相邻兄弟元素：垂直排列的两个块级元素，上下边距相遇时合并。
父元素与子元素：父元素无边框、内边距或内容阻隔时，第一个/最后一个子元素的margin可能与父元素的margin合并。
空块级元素：无内容、内边距、边框的元素，上下边距会合并。
补充：Margin塌陷的规则
合并后的值：取两个margin中的较大值。若一正一负，则取两者之和；若均为负，取绝对值较大者。
仅限垂直方向：水平方向的外边距不会合并。
仅块级元素：行内元素、浮动元素、绝对定位元素不会触发。
2.如何解决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合并。
3.HTML5有哪些新特性？
语义化标签
媒体标签（<video>和<audio>）
图形动画（Canvas和svg）
表单增强
新输入类型：
url、number、date、range、search等。新属性：
placeholder：输入框提示文本。
required：必填字段验证。
autocomplete：自动填充建议。
pattern：正则表达式验证。本地存储
Web Storage：客户端存储数据，替代 Cookie。
localStorage：永久存储，直到手动清除。
sessionStorage：会话期间存储，关闭标签页后失效。
IndexedDB：浏览器端非关系型数据库，支持大量数据存储。拖放 API
通信与实时交互
WebSocket：全双工通信协议，支持实时数据传输（如聊天应用）。
WebRTC：浏览器间直接音视频通信（如视频会议）。
4.常见的语义化标签有哪些？语义化标签的好处？
语义化标签：
<header>、<footer>：页眉和页脚。
<nav>：导航栏。
<article>：独立内容块（如博客文章）。
<section>：文档中的逻辑分区。
<aside>：侧边栏或附加内容。
<main>：页面主要内容区域。
<figure>和<figcaption>：媒体内容及其标题。好处：
提升 SEO（搜索引擎优化）
增强可访问性（Accessibility）
提高代码可读性与维护性
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中不存在，具体写法如下
语法 |
推荐程度 |
兼容性 |
使用场景 |
|
不推荐 |
已废弃 |
旧版 Vue |
|
不推荐 |
已废弃 |
早期 CSS Modules |
|
推荐 |
Vue 2 和 Vue 3 兼容 |
Vue 2 或向后兼容 |
|
强烈推荐 |
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.什么是强缓存、协商缓存？
强缓存： 当浏览器请求资源时，首先检查本地缓存是否命中。如果命中，则直接从缓存中读取资源，无需向服务器发送任何请求。（返回200）
协商缓存： 当强缓存未命中时，浏览器会向服务器发送请求，询问服务器资源是否发生变化。如果服务器告知资源未改变，则浏览器从缓存中读取资源；如果服务器告知资源已改变，则浏览器会下载新资源并更新缓存。（返回304）
11.Cookie、Session、LocalStorage、SessionStorage的区别
Cookie:
存储位置：Cookie存储在客户端的浏览器中。
生命周期：Cookie可以设置过期时间（Expires或Max-Age），到期后自动删除；若未设置过期时间，则为会话级（浏览器关闭后清除）。
容量限制：一般大小限制为4KB左右。
使用场景：主要用于用户身份认证（如记住登录状态）、保存用户偏好设置和跟踪用户行为（如广告点击记录）。
安全性：容易被劫持（如XSS攻击），可以通过设置HttpOnly和Secure属性提高安全性。
登录状态：可以在用户未登录时使用。
跨页面：可以跨多个页面和不同子域共享。
传输数据：每次请求都会携带 Cookie 数据。
Session:
高安全性场景：适用于需要保护敏感数据的场景，如在线银行、支付系统等。
存储位置：Session存储在服务端，服务器为每一个用户创建唯一的会话（Session）。
生命周期：Session存在于用户活动的会话期间，当用户退出或者关闭浏览器，会话数据就会被删除。
容量限制：取决于服务器配置。
使用场景：
用户会话管理：用于存储用户的会话信息，如购物车数据、用户权限等。安全性：相对安全，通过加密的 Session ID 进行识别和验证，且客户端不可见。
登录状态：需要用户登录后才能创建和访问会话数据。
跨页面：通常只能在单个会话期间。
传输数据：仅在初始会话时传输 Session ID，后续请求不再携带全部会话数据。
LocalStorage:
前端缓存：用于缓存大量数据，提高应用性能和用户体验。
存储位置：存储在客户端，浏览器内。
生命周期：持久性存储，除非手动删除，否则永久有效。
容量限制：一般为 5-10MB，各浏览器可能不同。
使用场景：
长期数据存储：适用于存储长期有效的数据，如用户偏好设置、浏览历史等。安全性：易受 XSS 攻击，数据存储在客户端。
登录状态：需要用户登录后才能创建和访问会话数据。
跨页面：可以在同一域下的所有页面中共享数据。
传输数据：不随请求发送，仅在客户端存储和访问。
SessionStorage:
多标签页数据隔离：在同一域名下的不同标签页之间实现数据隔离，防止数据污染。
存储位置：存储在客户端，浏览器内。
生命周期：会话级别，浏览器关闭或标签页关闭后失效。
容量限制：一般为 5-10MB，各浏览器可能不同。
使用场景：
临时数据存储：适用于存储会话级别的数据，如表单数据、页面状态等。安全性：易受 XSS 攻击，数据存储在客户端。
登录状态：需要用户登录后才能创建和访问会话数据。
跨页面：手动新建标签页无法共享数据，通过链接打开新页面会复制一套原有数据，但与原数据是独立的。
传输数据：不随请求发送，仅在客户端存储和访问。
12. 输入一个URL到页面过程中发生了什么
13. DNS解析的过程
浏览器缓存：浏览器首先检查自身缓存是否有该域名的IP记录，若有则直接使用。
系统缓存与Hosts文件：若浏览器无缓存，操作系统检查本地缓存（如Windows的DNS缓存）及Hosts文件，存在记录则返回。
本地DNS服务器查询：
用户配置的本地DNS服务器（如ISP提供的或公共DNS）接收递归查询请求。
若本地DNS有缓存且未过期，直接返回IP；否则开始迭代查询。
根域名服务器指引：本地DNS向根服务器查询，根服务器返回管理该顶级域（如
.com）的顶级域名服务器地址。顶级域名服务器指引：本地DNS询问顶级服务器（如
.com服务器），获取管理目标域（如example.com）的权威服务器地址。权威域名服务器解析：本地DNS向权威服务器查询，获得域名对应的IP（如
www.example.com的A记录），并缓存结果。结果返回与缓存：本地DNS将IP返回给用户，浏览器缓存该记录，后续请求可快速响应。
14.Cookie有哪些配置项
1.名称和值（Name and Value）
每个Cookie都有一个名称和值，名称和值由服务器设置，并在发送给客户端时存储在浏览器中。
document.cookie = "username=JohnDoe";2.域（Domain）
指定Cookie所属的域。默认情况下，Cookie属于创建它的域。
document.cookie = "username=JohnDoe; domain=example.com";3.路径（Path）
指定Cookie的有效路径。只有在该路径下的页面才能访问Cookie。
document.cookie = "username=JohnDoe; path=/account";4.有效期（Expires）
指定Cookie的过期时间。可以设置为特定的日期和时间，超过这个时间后，Cookie将被删除。
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT";5.最大年龄（Max-Age）
指定Cookie从创建开始的有效时间，以秒为单位。这个属性比expires属性更精确。
document.cookie = "username=JohnDoe; max-age=3600";6.安全性（Secure）
指定Cookie只能通过HTTPS协议发送，确保数据传输的安全性。
document.cookie = "username=JohnDoe; secure";7.HttpOnly
指定Cookie只能通过HTTP协议访问，客户端JavaScript无法访问，增加安全性，防止跨站脚本攻击（XSS）。
document.cookie = "username=JohnDoe; HttpOnly";8.SameSite
指定Cookie的SameSite属性，防止跨站请求伪造（CSRF）攻击。取值可以是
Strict、Lax或None。document.cookie = "username=JohnDoe; SameSite=Strict";
创建于2025.5.29，后续继续更新