2. 外部样式表（推荐项目用）
3. 内联样式（不推荐）
内容
❓ 问题2: JavaScript 代码写在哪里？
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
答案：JS 可以放 或 ，但有讲究！
推荐方法：
1. 放在 前（最简单）✅
内容
2. 放在 里加 defer（现代推荐）✅
原因：确保 HTML 元素加载完成后，JS 才能操作它们
❓ 问题3: viewport 是什么意思？
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
拆解说明：
- viewport = 视口（屏幕可视区域）
- width=device-width = 网页宽度 = 设备屏幕宽度
- initial-scale=1.0 = 初始缩放比例 = 不缩放
作用：让网页在手机上正常显示，文字不会太小！
没有这行代码 ❌：
- 手机上会按电脑屏幕大小（980px）渲染
- 然后缩小显示，文字超级小
有这行代码 ✅：
- 网页根据手机屏幕宽度自动适配
- 文字大小正常，体验好
❓ 问题4: px 是什么？有哪些单位？
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
px = pixel（像素），屏幕上最小的显示单位
【绝对单位】固定大小：
- px 像素（最常用） width: 100px
- cm 厘米 width: 5cm
- mm 毫米 width: 50mm
- in 英寸 width: 2in
【相对单位】自动调整：
- % 相对父元素的百分比 width: 50%
- em 相对当前字体大小 padding: 2em
- rem 相对根元素字体大小 font-size: 1.5rem
- vw 相对视口宽度的1% width: 50vw
- vh 相对视口高度的1% height: 100vh
举例对比：
固定：width: 300px; → 永远是 300 像素
相对：width: 50%; → 父元素宽度的 50%
视口：width: 30vw; → 浏览器窗口宽度的 30%
❓ 问题5: 300px 是怎么来的？换设备后怎么变化？
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
答案：300px 是开发者自己定的！
问题：px 是固定单位，不会自动变化
设备对比：
- 电脑（1920px） → 300px 很小，合适 ✅
- 平板（768px） → 300px 还行 ✅
- 手机（375px） → 300px 太宽，几乎占满 ⚠️
- 小手机（320px） → 300px 超出屏幕！❌
解决方案 - 响应式设计：
方法1：百分比 + 限制
.card {
width: 90%;
max-width: 300px;
}
方法2：媒体查询（本文件使用的方法）
.card {
width: 300px; // 默认桌面端
}
@media (max-width: 480px) {
.card {
width: 100%; // 手机上占满
}
}
方法3：视口单位
.card {
width: 30vw;
min-width: 280px;
max-width: 400px;
}
❓ 问题6: 常用 CSS 属性有哪些？
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【盒模型】
width: 300px; 宽度
height: 200px; 高度
padding: 20px; 内边距（内容到边框的距离）
margin: 10px; 外边距（元素之间的距离）
border: 2px solid red; 边框（宽度 样式 颜色）
【背景】
background-color: red; 背景颜色
background: #f0f2f5; 背景（简写）
【文字】
color: #333; 文字颜色
font-size: 16px; 字体大小
font-weight: bold; 字体粗细
text-align: center; 对齐方式
line-height: 1.5; 行高
【布局 Flexbox】
display: flex; 开启弹性布局
flex-direction: column; 排列方向（row横 | column竖）
align-items: center; 交叉轴对齐（水平居中）
justify-content: center; 主轴对齐（垂直居中）
gap: 20px; 子元素间距
【装饰】
border-radius: 10px; 圆角
box-shadow: 0 4px 10px rgba(0,0,0,0.1); 阴影
transition: 0.3s; 过渡动画
cursor: pointer; 鼠标样式
❓ 问题7: 如何实现响应式设计？
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
使用 @media 媒体查询（本文件已实现）
语法：
@media (条件) {
// 满足条件时应用的样式
}
常用条件：
@media (max-width: 480px) 屏幕宽度 ≤ 480px（手机）
@media (min-width: 768px) 屏幕宽度 ≥ 768px（平板及以上）
@media (min-width: 481px) and (max-width: 768px)
481px ≤ 屏幕宽度 ≤ 768px（平板）
本文件的实现逻辑：
1. 默认样式 → 桌面端（宽度 300px）
2. 屏幕 ≤ 768px → 平板（宽度 350px）
3. 屏幕 ≤ 480px → 手机（宽度 100%，头像和字体变小）
设备适配效果：
- 电脑：卡片 300px，标准大小
- 平板：卡片 350px，稍大
- 手机：卡片 100%，充分利用屏幕空间
📝 学习建议
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 在浏览器中打开这个文件，调整窗口大小看响应式效果
2. 按 F12 打开开发者工具，切换设备模拟器
3. 尝试修改数值，观察效果变化
4. 逐步理解每个属性的作用
快捷键：
- F12: 打开开发者工具
- Ctrl + Shift + M: 切换设备模拟器（Chrome）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
