CSS

这一课你将能做到

1. 用选择器选中页面元素并设置样式
2. 理解盒模型（content、padding、border、margin）
3. 用 Flexbox 实现常见布局

为什么要学

HTML 搭好骨架后，页面是「裸奔」的——黑字白底、左对齐、无间距。CSS 负责让页面好看：颜色、字体、间距、布局、动画。

人话：CSS 是「装修队」，把毛坯房变成精修房。

先建立图像

/* 选择器 { 属性: 值; } */
h1 {
    color: #2563eb;      /* 文字颜色 */
    font-size: 24px;     /* 字体大小 */
    margin-bottom: 16px; /* 下外边距 */
}

浏览器解析后：

元素 <h1> 被选中
  → 应用 color: 蓝色
  → 应用 font-size: 24px
  → 应用 margin-bottom: 16px

跟着做

步骤 1：三种引入方式

<!-- 1. 内联样式（不推荐） -->
<p style="color: red;">红色文字</p>

<!-- 2. 内部样式表 -->
<head>
    <style>
        p { color: blue; }
    </style>
</head>

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

外部样式表最常用，便于维护和缓存。

步骤 2：选择器

/* 元素选择器 */
p { color: #333; }

/* 类选择器（最常用） */
.btn { padding: 8px 16px; }
.btn-primary { background: #2563eb; }

/* ID 选择器（唯一） */
#header { height: 64px; }

/* 后代选择器 */
.card p { line-height: 1.6; }

/* 子元素选择器 */
.list > li { margin-bottom: 8px; }

/* 伪类 */
a:hover { color: #2563eb; }
input:focus { border-color: #2563eb; }

步骤 3：盒模型

.box {
    width: 200px;           /* 内容宽度 */
    padding: 16px;          /* 内边距 */
    border: 1px solid #ddd; /* 边框 */
    margin: 8px;            /* 外边距 */
}

实际占用宽度 = 200 + 16×2 + 1×2 + 8×2 = 250px

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

步骤 4：Flexbox 布局（现代布局）

/* 水平排列，间距均匀 */
.nav {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center;            /* 垂直居中 */
    gap: 16px;                      /* 元素间距 */
}

/* 卡片网格 */
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.card {
    flex: 1 1 300px; /* 最小 300px，可伸缩 */
}

步骤 5：实战——课程卡片

.course-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.course-title {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
}
.course-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

讲清楚要点

1. 层叠性：多个选择器命中同一元素时，按优先级和顺序生效。
2. 继承性：color、font-size 等属性会从父元素继承。
3. 盒模型：content → padding → border → margin，box-sizing: border-box 让计算更直觉。
4. Flexbox 是一维布局：擅长单行/单列排列，配合 flex-wrap 实现多行。
5. 单位：px 固定像素，rem 相对根元素，% 相对父元素，vw/vh 相对视口。

你可能会懵的地方

• CSS 和 CSS3 的区别？ CSS3 是最新版本，新增动画、渐变、圆角、阴影、Flexbox、Grid 等。平时说的 CSS 就是 CSS3。

• 类名用中划线还是驼峰？ CSS 惯例用中划线：.btn-primary。JavaScript 操作时用驼峰：element.classList.add('btnPrimary')。

• 优先级怎么算？ 内联 > ID > 类 > 元素。!important 最高，但慎用。

• margin 塌陷是什么？ 相邻块级元素的垂直 margin 会合并（取较大值）。用 padding 或 border 避免。

• z-index 不生效？ 只对定位元素（position: relative/absolute/fixed）生效。

错法对照

错法	问题	正解
全局 * { margin: 0; padding: 0; }	性能差，破坏浏览器默认样式	用 normalize.css 或针对性重置
用 !important 覆盖样式	难以维护，优先级失控	提高选择器特异性或调整顺序
width: 100% + padding 导致溢出	盒模型计算错误	box-sizing: border-box
用 float 做布局	清除浮动麻烦，已过时	用 Flexbox 或 Grid
行内元素设 width/height	不生效	改 display: inline-block 或 block

卡点急救

1. 样式不生效：检查选择器拼写、文件路径、缓存（Ctrl+F5 强制刷新）。
2. 元素重叠：检查 z-index 和 position，确保定位元素有 z-index。
3. Flex 子元素不伸缩：确认父元素有 display: flex，子元素有 flex: 1。

面试常问

• 盒模型？ content + padding + border + margin，box-sizing: border-box 让 width 包含 padding 和 border。

• BFC 是什么？ 块级格式化上下文，解决 margin 塌陷、浮动塌陷。触发方式：overflow: hidden、display: flow-root。

• Flexbox 和 Grid 区别？ Flexbox 一维（行或列），Grid 二维（行列同时）。Flex 适合导航、卡片列表；Grid 适合整体页面布局。

自测三问

1. box-sizing: border-box 的作用？
2. Flexbox 中 justify-content 和 align-items 的区别？
3. 选择器优先级规则？

小结一句话

CSS 用选择器选中元素，通过盒模型和 Flexbox 控制布局；box-sizing: border-box 是现代项目的标配。

延伸

• MDN CSS 基础
• 下一课：JavaScript 让页面动起来。