# CSS = 给 HTML 穿衣服
# 没有 CSS 的 HTML → 素颜（丑但能用）
# 加了 CSS 的 HTML → 化了妆（好看！）

# 三种引入方式：
# 1. 内联样式（写在标签上）→ 不推荐
# 2. 内部样式（写在 <style> 标签里）→ 小项目可以
# 3. 外部样式（写在 .css 文件里）→ 推荐

<!-- 方式1：内联样式（不推荐） -->
<p style="color: red; font-size: 18px;">红色文字</p>

<!-- 方式2：内部样式 -->
<head>
<style>
    p { color: red; font-size: 18px; }
</style>
</head>

<!-- 方式3：外部样式（推荐） -->
<head>
<link rel="stylesheet" href="style.css">
</head>

/* style.css */
p {
    color: red;
    font-size: 18px;
}

/* 元素选择器 */
p { color: blue; }
h1 { font-size: 24px; }

/* 类选择器（最常用） */
.highlight { background: yellow; }
.btn-primary { background: #07c160; color: white; }

/* ID 选择器 */
#header { background: #333; }
#main-content { max-width: 800px; }

/* 后代选择器 */
.nav a { color: white; }          /* .nav 下所有的 a */
.card .title { font-size: 18px; } /* .card 下的 .title */

/* 子元素选择器 */
.nav > li { display: inline; }    /* 只选直接子元素 */

/* 相邻兄弟 */
h2 + p { font-size: 16px; }       /* 紧跟 h2 后面的 p */

/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }
a[target="_blank"] { color: red; }

/* 伪类 */
a:hover { color: red; }           /* 鼠标悬停 */
a:visited { color: purple; }      /* 已访问 */
input:focus { border-color: blue; } /* 获得焦点 */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f9f9f9; } /* 奇数行 */

/* 伪元素 */
p::first-line { font-weight: bold; }
p::before { content: "📌 "; }
p::after { content: " ✅"; }

📋 选择器优先级

4. 常用属性

/* 文字 */
color: #333;                   /* 文字颜色 */
font-size: 16px;               /* 字号 */
font-weight: bold;             /* 粗体（normal/bold/100-900） */
font-family: Arial, sans-serif; /* 字体 */
text-align: center;            /* 对齐（left/center/right） */
text-decoration: none;         /* 去掉下划线 */
line-height: 1.8;              /* 行高 */

/* 背景 */
background: #f5f5f5;           /* 背景色 */
background: url(bg.jpg);       /* 背景图 */
background-size: cover;        /* 图片铺满 */
background-position: center;   /* 图片居中 */

/* 边框 */
border: 1px solid #ccc;        /* 实线边框 */
border: 2px dashed #999;       /* 虚线边框 */
border-radius: 8px;            /* 圆角 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影 */

/* 阴影 */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 文字阴影 */

/* 透明度 */
opacity: 0.8;                  /* 0=完全透明，1=不透明 */

/* 过渡动画 */
transition: all 0.3s ease;     /* 平滑过渡 */

/* 溢出处理 */
overflow: hidden;              /* 隐藏溢出 */
overflow: auto;                /* 需要时显示滚动条 */
text-overflow: ellipsis;       /* 文字溢出显示省略号 */

5. 盒模型

每个 HTML 元素都是一个"盒子"，由四层组成：

/*
┌─────────────────────────────────┐
│            margin（外边距）       │
│  ┌───────────────────────────┐  │
│  │      border（边框）        │  │
│  │  ┌───────────────────┐    │  │
│  │  │  padding（内边距） │    │  │
│  │  │  ┌─────────────┐  │    │  │
│  │  │  │   content    │  │    │  │
│  │  │  │  （内容）     │  │    │  │
│  │  │  └─────────────┘  │    │  │
│  │  └───────────────────┘    │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘
*/

.box {
    width: 300px;            /* 内容宽度 */
    height: 200px;           /* 内容高度 */
    padding: 20px;           /* 内边距（内容到边框的距离） */
    border: 5px solid #333;  /* 边框 */
    margin: 10px;            /* 外边距（元素之间的距离） */

    /* 关键：box-sizing 让 width 包含 padding 和 border */
    box-sizing: border-box;  /* 推荐！ */
}

/* margin 简写 */
margin: 10px;                /* 四个方向都是 10px */
margin: 10px 20px;           /* 上下 10px，左右 20px */
margin: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */

/* padding 同理 */
padding: 16px;
padding: 16px 24px;

💡 box-sizing: border-box 是必须的！

默认情况下，width: 300px 只是内容宽度，加上 padding 和 border 后实际宽度会更大。

box-sizing: border-box 让 width 包含 padding 和 border——300px 就是 300px，不会溢出。

几乎所有项目都会在全局设置：* { box-sizing: border-box; }

6. Flexbox 布局

Flexbox 是 CSS 最强大的布局工具——轻松实现水平居中、垂直居中、等分布局。

/* 容器设置 */
.container {
    display: flex;             /* 开启 Flex 布局 */

    /* 主轴方向 */
    flex-direction: row;       /* 水平排列（默认） */
    /* flex-direction: column; 垂直排列 */

    /* 主轴对齐 */
    justify-content: center;   /* 居中 */
    /* flex-start / flex-end / space-between / space-around / space-evenly */

    /* 交叉轴对齐 */
    align-items: center;       /* 垂直居中 */
    /* flex-start / flex-end / stretch */

    /* 换行 */
    flex-wrap: wrap;           /* 自动换行 */

    /* 间距 */
    gap: 16px;                 /* 子元素间距 */
}

/* 子元素 */
.item {
    flex: 1;                   /* 等分剩余空间 */
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

.item-fixed {
    flex: 0 0 200px;           /* 固定 200px，不伸缩 */
}

.item-grow {
    flex-grow: 2;              /* 占 2 份（其他占 1 份） */
}

/* 经典场景1：水平垂直居中 */
.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* 经典场景2：两端对齐 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 经典场景3：等宽三列 */
.three-col {
    display: flex;
    gap: 20px;
}
.three-col > * {
    flex: 1;
}

/* 经典场景4：侧边栏固定 + 主内容自适应 */
.layout {
    display: flex;
}
.sidebar {
    flex: 0 0 250px;           /* 固定 250px */
}
.main {
    flex: 1;                   /* 剩余空间全部给主内容 */
}

7. Grid 布局

Grid 是二维布局——同时控制行和列。适合复杂的页面布局。

.grid-container {
    display: grid;

    /* 定义列 */
    grid-template-columns: 200px 1fr 200px;  /* 三列：左右固定，中间自适应 */
    /* grid-template-columns: repeat(3, 1fr);  等宽三列 */
    /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 自适应列数 */

    /* 定义行 */
    grid-template-rows: 60px 1fr 40px;       /* 三行：头尾固定，中间自适应 */

    /* 间距 */
    gap: 16px;
}

/* 子元素可以跨行跨列 */
.item {
    grid-column: 1 / 3;       /* 从第1列到第3列（跨2列） */
    grid-row: 1 / 2;          /* 从第1行到第2行 */
}

/* 经典布局：头-侧-主-尾 */
.page-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main   main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 60px 1fr 40px;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

8. 响应式设计

/* 媒体查询：根据屏幕宽度应用不同样式 */

/* 手机（< 768px） */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .main { padding: 10px; }
    .grid-container { grid-template-columns: 1fr; }
}

/* 平板（768px - 1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .sidebar { flex: 0 0 200px; }
    .grid-container { grid-template-columns: 200px 1fr; }
}

/* 桌面（> 1024px） */
@media (min-width: 1024px) {
    .container { max-width: 1200px; margin: 0 auto; }
}

/* 移动端优先（推荐） */
/* 默认写移动端样式，大屏覆盖 */
.container {
    padding: 10px;
}

@media (min-width: 768px) {
    .container { padding: 20px; }
}

@media (min-width: 1024px) {
    .container { max-width: 1200px; margin: 0 auto; }
}

💡 响应式设计的核心公式：

viewport meta + 媒体查询 + Flexbox/Grid + 百分比/rem 单位

一定要加：<meta name="viewport" content="width=device-width, initial-scale=1.0">

9. 今日练习

🏋️ 练习 1：导航栏

# 用 Flexbox 实现：
# - 左侧 Logo
# - 右侧导航链接（水平排列）
# - 垂直居中对齐
# - 手机端变为汉堡菜单（用媒体查询隐藏链接）

🏋️ 练习 2：卡片布局

# 用 Grid 实现自适应卡片布局：
# - 大屏：4 列
# - 中屏：2 列
# - 小屏：1 列
# 每张卡片有图片、标题、描述、价格

🏋️ 练习 3：圣杯布局

# 用 Flexbox 或 Grid 实现经典布局：
# - Header：固定在顶部
# - Sidebar：左侧 250px
# - Main：中间自适应
# - Footer：固定在底部

10. 今日小结

🚀 明日预告：Day 69 — JavaScript 基础

HTML 是骨架，CSS 是皮肤，JavaScript 是肌肉——让网页动起来！明天学 JS 基础：变量、函数、DOM 操作、事件处理、AJAX 请求。这是前端三件套的最后一块拼图！