1. 为什么设置了这就话后，input 会自动换行？#

你提到的代码块（在 @media (max-width: 700px) 中）：

1
.course-r {
2
  display: grid;         /* 1. 改变布局模式 */
3
  gap: 20px;
4
  justify-content: center;
5
  justify-items: center;
6
}

• 布局模式改变：原本 .course-r 是 display: flex（Flex布局默认是水平排列，一行显示）。这段代码将其改为了 display: grid（Grid布局）。
• 默认行为：在 Grid 布局中，如果你没有特别指定 grid-template-columns 来定义列数，默认情况下，每一个子元素（网格项）都会独占一行。
• 结果：.icon 盒子作为第一个子元素占据第一行，.search 盒子作为第二个子元素就被挤到了第二行，这就是你看到的“自动换行”现象。

2. 如果不写（保持 Flex 布局），为什么缩小屏幕时 li 里的图标会缩小，而 .search 盒子不会？#

这是因为两者的内容宽度特性不同，在 Flex 容器空间不足进行收缩（shrink）时表现不一：

1. Search 盒子是“硬”的（固定宽度）：

   • 查看 index.css 可以发现，.search input 设置了具体的宽度：width: 204px;。
   • 在 Flex 布局中，浏览器会优先保证这些有固定宽度的元素的内容能完整显示。.search 盒子的最小宽度被这个 204px 的 input 撑住了，它很难再被压缩。

2. 图标区域是“软”的（弹性宽度）：

   • .icon ul 使用了 repeat(7, 1fr)。这里的 1fr 是一个弹性单位，意思是可以根据剩余空间自由伸缩。
   • 同时，通常在响应式基础样式（如 base.css）中，图片都会设置 img { max-width: 100%; }。
   • 过程：当屏幕变窄，Flex 容器空间不足 -> .search 盒子死守 204px 不退让 -> 压力全给到了左边的 .course-l（如果有）和 .icon 部分 -> 由于 1fr 允许被压缩，且图片支持 max-width: 100% 缩小，所以浏览器选择压缩图标区域来适应屏幕。

总结：一边是写死了 px 的固定宽度，一边是 fr 的弹性宽度，Flexbox 在空间不足时，会优先牺牲那个弹性的部分。

关键区别：fr (可以怂) vs px (我很刚)#

1
.icon ul {
2
  display: grid;
3
  grid-template-columns: repeat(7, 1fr);  /* <--- 罪魁祸首在这里 */
4
  gap: 20px;
5
}

1
.search input {
2
  width: 204px; /* <--- 这是一个没有任何商量余地的绝对值 */
3
  /* padding 还会撑大它 */
4
}

总结#

• 图标变小是因为它的布局管理员（Grid 容器）用了 1fr 这个软性单位，虽然住户（图片）想占 44px，但房东（Grid）把只有 30px 的房间分给了它，它只能缩小。
• 搜索框不变是因为它由内而外都是硬性像素（px） 撑起来的，浏览器不敢随便压扁它。

• align-items: end 的意思是：每个子项按“自身内容高度”排版，然后在各自网格区域内靠底对齐。

解决方法#

你需要直接在 button 的样式里设置颜色：

1
/* ...existing code... */
2
.footer-con-left .item button {
3
  display: flex;
4
  align-items: center;
5
  width: 144px;
6
  height: 44px;
7
  border-radius: 10px;
8
  background: none;
9
  gap: 10px;
10
  /* 添加下面这一行 */
11
  color: #fff;
12
  /* 建议同时加上这两行去除默认边框和增加手型 */
13
  border: 0;
14
  cursor: pointer;
15
}
16
/* ...existing code... */

1. 作用#

outline: 0 (或者 outline: none) 的作用是移除元素默认的轮廓线。

2. 为什么要写这个？#

• 默认行为：如果你不写这一行，当用户点击这个按钮（或者用键盘 Tab 键选中它）使其处于 聚焦状态 (focus) 时，浏览器会自动在按钮周围加上一圈默认的蓝线（Chrome）或虚线（Firefox）。这通常被称为 “focus ring”。
• 美观考虑：很多设计师觉得这个默认的蓝框很丑，和网站的整体设计风格不搭，所以开发人员通常会用 outline: 0 把它去掉。

3. outline 和 border 的区别#

• Border (边框)：占用空间，会改变盒子的尺寸。
• Outline (轮廓)：不占用空间，它是在盒子外面画的，不会把周围的元素挤开。

⚠️ 无障碍访问 (Accessibility) 警告#

虽然去掉它能让点击效果更好看，但也带来了一个副作用：键盘用户（使用 Tab 键浏览网页的人）看不出当前选中的是哪个按钮了。

• 最佳实践：如果去掉了默认的 outline，最好 manually（手动）为 :focus 状态定义一些样式（比如改变背景色或加个 shadow），以便让用户知道当前焦点在哪里。

你下方的 :hover 样式已经做了一些背景和阴影变化，这在鼠标操作时很好，但键盘操作时可能需要补充 :focus 样式。

不会。

为什么看起来好像起作用了？#

这是常见的错觉，分两种情况：

1. 父元素带着跑（被动）：

   • 代码中 .item:hover 触发了 transform: scale(1.1)（整体放大）。
   • 父盒子平滑放大的过程中，里面的图片、文字作为父盒子的一部分，当然也跟着一起平滑放大了。但这不叫继承，这叫“跟着动”。

2. 子元素自己变（主动）：

   • 代码中还写了 .item:hover figure>img { transform: scale(0.9); }（图片缩小）。
   • 关键点：如果图片自己没有写 transition，那么鼠标放上去的瞬间，父盒子在平滑变大，而图片会瞬间生硬地缩小。
   • 所以，你在代码第 262行 专门给图片也写了一句 transition: all 0.3s ...，就是为了让图片自己的变化也能动起来。

结论#

谁发生属性变化，谁就得自己加 transition。 父元素的 transition 只负责父元素自己的变化。

1. justify-content (管局势 - 水平整体)#

• 作用对象：整体内容（所有子元素作为一个整体）。
• 控制方向：主轴（通常是水平方向 Left $\leftrightarrow$ Right）。
• 场景：
  • Grid：把所有列放在容器的左边、中间、还是右边？
  • Flex：把所有子元素排在左边、中间、还是两头分开？
• 常见值：
  • center：整体居中。
  • space-between：两端对齐，中间拉开。
  • start / end：靠左 / 靠右。

2. align-items (管个体 - 垂直单行)#

• 作用对象：每一行里的单体。
• 控制方向：交叉轴（通常是垂直方向 Top $\updownarrow$ Bottom）。
• 场景：
  • Grid：这一行的格子里，内容是在格子的上边、中间、还是下边？
  • Flex：这一行的元素，是靠上对齐、居中对齐、还是拉伸填满高度？
• 常见值：
  • center：垂直居中（最常用）。
  • stretch：默认值，拉伸填满高度。
  • start / end：顶对齐 / 底对齐。

3. justify-items (管个体 - 水平单行)#

• 注意：这是 Grid 布局特有的，Flex 布局没有这个属性（Flex 里控制子项水平只能靠 margin: auto 或 justify-content）。
• 作用对象：每一个格子里的内容。
• 控制方向：水平方向（单个格子内部）。
• 场景：
  • Grid：不管格子多宽，我要让内容死死地守在格子的正中心。
• 常见值：center, start, end, stretch。

4. align-content (管局势 - 垂直整体)#

• 回答你的问题：是的，有 align-content！
• 作用对象：多行整体。只有当内容**折行（多行）**且容器高度有剩余空间时才生效。
• 控制方向：交叉轴（垂直方向整体）。
• 场景：
  • Grid/Flex：我有 5 行内容，容器很高。我是要把这 5 行整体打包放在容器顶部？还是垂直居中？还是把这 5 行上下分散开？
• 区别：
  • align-items 是管每一行内部怎么对齐。
  • align-content 是管这几行之间怎么排布。

总结速查表#