面试备战录1、页面中有哪些标签是有默认交互行为的 2、CSS 中如何实现响应式设计？常用的技巧有哪些？ 3、媒体查询中

1、页面中有哪些标签是有默认交互行为的？如何阻止？

超链接标签<a>
- 默认行为：点击会跳转到href指向的地址，若是锚点#id会滚动到目标元素。
- 阻止方式：

<a href="https://example.com" onclick="event.preventDefault()"> 点击我 </a>

表单相关标签
- <form>：默认行为：点击提交按钮时会提交表单并刷新页面。
```

<form onsubmit="event.preventDefault()">
  <button type="submit">提交</button>
</form>
```
- <input type="submit"> / <button type="submit">：
  - 默认行为：触发表单提交。
  - 阻止方式：改为type="button"，或者event.preventDefault()。
- <input type="checkbox"> / <input type="radio">
  - 默认行为：点击后会切换选中状态。
```

<input type="checkbox" onclick="event.preventDefault()" />
```
- <input type="text"> / <textarea>
  - 默认行为：按回车提交表单，空格、方向键会有光标移动。
  - 阻止方式：监听keydown并event.preventDefault()。
<label>
- 默认行为：点击label会触发绑定表单控件的点击/聚焦
- 阻止方式：event.preventDefault()
<details> / <summary>
- 默认行为：点击<summary>会展开/收起<details>。
- 阻止方式：event.preventDefault()

<details onclick="event.preventDefault()">
  <summary>标题</summary>
  <p>内容</p>
</details>

<video> / <audio>
- 默认行为：点击会播放/暂停，右键可能有自带菜单。
- 阻止方式：监听play / pause并立即event.preventDefault()，或拦截点击。
<img>（带draggable默认属性）
- 默认行为：图片可被拖拽。
- 阻止方式：draggable="false"

<img src="xx.png" draggable="false" ondragstart="event.preventDefault()" />

浏览器内置行为（附加）
- 右键菜单（contextmenu事件 → event.preventDefault()）
- 文本选中（user-select: none;）
- 拖放行为（draggable=false + 阻止 dragstart）

2、媒体查询中 min-width 和 max-width 的使用场景？

答：min-width常用于移动优先开发，从小屏开始适配；max-width常用于桌面优先开发，从大屏开始适配；推荐移动优先（min-width），因为移动端用户更多，CSS加载性能更好。

min-width 移动优先（Mobile First）：当视口宽度大于等于某值时应用样式
- 从 小屏（默认样式） 开始写
- 当屏幕更大时，再逐渐覆盖样式
- 推荐现代开发，符合响应式设计的趋势
- 优点：小屏设备优先，性能更好（手机用户更多）

/* 默认：手机端 */
.container {
  font-size: 14px;
}
/* 平板 */
@media (min-width: 768px) {
  .container {
    font-size: 16px;
  }
}
/* 桌面 */
@media (min-width: 1200px) {
  .container {
    font-size: 18px;
  }
}

max-width 桌面优先（Desktop First）：当视口宽度小于等于某值时应用样式
- 从 大屏（默认样式） 开始写
- 当屏幕缩小时，再用max-width调整
- 如果项目最初是PC网站，后加移动适配，max-width更直观

/* 默认：桌面端 */
.container{
  font-size: 18px;
}
/* 平板及以下 */
@media (max-width: 1200px) {
  .container {
    font-size: 16px;
  }
}
/* 手机端 */
@media (max-width: 768px) {
  .container{
    font-size: 14px;
  }
}

3、CSS 中如何实现响应式设计？常用的技巧有哪些？

答：响应式设计（Responsive Design）：根据屏幕大小、分辨率或设备方向自动调整布局和样式，使网页在不同设备上都有良好的展示效果。自适应各种终端（PC、平板、手机），避免开发多套样式。

实现方式

媒体查询（Media Queries）
- 核心方法，通过@media根据屏幕宽度、分辨率或方向应用不同样式。
- 优点：灵活、兼容性好

/* 默认样式（手机端） */
.container {
   width: 100%;
}
/* 平板端 */
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
/* PC 端 */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

弹性布局（Flex / Grid）
- Flexbox适合一维布局（水平或垂直）
- Grid适合二维布局（行 + 列）
- 优点：布局自适应，不依赖固定宽度
- 常用于列表、卡片、网格布局
相对单位
- 百分比 %：相对父元素宽度
- 视口单位 vw/vh：相对屏幕宽高
- em/rem：相对字体大小，可做自适应字体
响应式图片
- <img srcset> 或 CSS background-image + media query
- 避免在小屏幕加载过大图片，提高性能

<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" alt="" />

移动端适配
- 视口meta标签
- 移动端手势优化：触摸区域、字体大小、按钮间距

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

响应式字体 /rem + vw
- 利用 calc 或 clamp 结合视口宽度实现字体自适应

h1 {
  font-size: clamp(16px, 2vw, 24px);
}

4、Flex 和 Grid 的区别？各自适用于什么场景？

答：Flex（弹性布局）：一维布局系统（主轴 + 交叉轴），擅长处理单行/单列的元素对齐与分布。Grid（网格布局）二维布局系统（行 + 列同时控制），适合处理复杂的页面整体布局。

Flex
- 核心是主轴伸缩：子元素可以根据flex-grow / flex-shrink / flex-basis自适应。
- 强调内容驱动布局，适合根据内容多少灵活分配空间。
- 常见属性：justify-content、align-items、flex-wrap。
Grid
- 核心是网格划分：先定义行列轨道（grid-template-rows / grid-template-columns），再将子元素放入网格。
- 强调容器驱动布局，先有布局规则，元素根据规则定位。
- 常见属性：grid-template-areas、grid-auto-flow、place-items。

5、position: relative, absolute, fixed, sticky 的区别？

position: relative;
- 定位方式：相对于元素原本位置偏移
- 布局行为：仍占据原来的文档流空间
- 应用场景：轻微微调元素位置（top, left等）；给子元素做 绝对定位参考（定位上下文）
position: absolute
- 定位方式：相对于最近的已定位祖先元素（非 static）
- 布局行为：脱离文档流，不占据原本空间
- 应用场景：弹出层、工具提示、模态框
position: fixed
- 定位方式：相对于 浏览器视口（viewport）
- 布局行为：脱离文档流
- 特点：不随页面滚动而移动；常用于固定导航栏、返回顶部按钮。
position: sticky
- 定位方式：结合relative + fixed
- 特点：元素在容器内相对文档流定位，滚动到一定阈值时固定在可视区；必须有父容器高度
- 应用场景：表头固定、滚动触发吸顶效果