HTML + CSS + JavaScript 快速入门（二）：CSS 详解

likuoelie

75人浏览 · 2026-03-22 09:18:58

likuoelie · 2026-03-22 09:18:58 发布

HTML + CSS + JavaScript 快速入门（二）：CSS 详解（2026 年视角）

这是系列第二讲，我们把 CSS（Cascading Style Sheets）讲透。
CSS 的核心使命：控制 HTML 元素的视觉呈现（颜色、间距、大小、布局、动画等）。
2025–2026 年的现代 CSS 已经非常强大：Flexbox + Grid + Container Queries + Subgrid + Cascade Layers 等特性让“纯 CSS 实现复杂响应式布局”变得现实。

1. CSS 引入方式对比（日常选择）

方式	写法示例	适用场景	推荐度（2026）
内联样式	`<h1 style="color:red;">`	快速测试、邮件模板、动态 JS 注入	★☆☆☆☆
内部样式（`<style>`）	`<style> body { margin:0; } </style>`	单文件演示、组件库 demo	★★☆☆☆
外部样式表（推荐）	`<link rel="stylesheet" href="styles.css">`	几乎所有真实项目	★★★★★
CSS 模块 / Scoped	（框架内：CSS Modules、Styled Components、Vanilla Extract）	大型组件化项目	★★★★☆

现代推荐：始终使用外部 .css 文件 + <link>，并考虑 PostCSS / Tailwind / UnoCSS 等工具链。

2. CSS 选择器速查（高频 Top 15）

选择器类型	示例	优先级	说明
元素	`p`	1	所有段落
类	`.card`	10	最常用
ID	`#header`	100	慎用（特异性太高）
属性	`[type="checkbox"]`	10	表单常用
后代	`.card p`	—	所有后代 p
子元素	`.card > p`	—	直接子元素
相邻兄弟	`h2 + p`	—	紧跟 h2 的第一个 p
通用兄弟	`h2 ~ p`	—	h2 后面的所有 p
:hover / :focus	`a:hover`	—	交互状态
:nth-child(n)	`li:nth-child(odd)`	—	隔行变色经典
:not()	`:not(.active)`	—	排除
:has()	`.card:has(img)`	—	2023+ 超级强大（父选择子）
[data-*]	`[data-theme="dark"]`	10	自定义属性常用

3. 盒模型（Box Model）——必须彻底搞懂

现代项目几乎都用 box-sizing: border-box;（全局设置）

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

border-box vs content-box 对比：

content-box（默认，老思维）：width = 内容宽度，实际占用 = width + padding + border
border-box（现代标配）：width = 内容 + padding + border 的总宽度

4. 现代布局核心：Flexbox vs Grid（2026 共识）

特性	Flexbox	CSS Grid	什么时候选谁？（2026 建议）
维度	1维（行或列）	2维（行+列）	—
典型场景	导航栏、卡片内容对齐、居中	整体页面布局、画廊、表单网格	—
对子元素控制	非常灵活（grow/shrink/order）	精确轨道（fr / minmax / auto）	—
嵌套友好	好	一般（但 Subgrid 2025–2026 解决）	—
响应式切换容易度	★★★★★	★★★★☆	Flex 更宽容
浏览器支持	100%	100%（Subgrid ~92–98%）	—

一句话决策口诀：

“内容对齐 / 一维排列 → Flexbox”
“二维网格 / 显式行列 → Grid”
“两者结合” 是最常见模式（Grid 做页面骨架，Flex 做组件内部）

Flexbox 经典写法（背下来）

.container {
  display: flex;                /* 或 inline-flex */
  flex-direction: row;          /* row | column | row-reverse */
  justify-content: center;      /* 主轴对齐 */
  align-items: center;          /* 交叉轴对齐 */
  gap: 1.5rem;                  /* 子元素间距（最常用） */
}

.item {
  flex: 1 1 200px;              /* grow shrink basis */
  /* 简写：flex-grow flex-shrink flex-basis */
}

Grid 经典写法（2026 推荐）

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  /* 或者显式： 1fr 1fr 1fr; */
}

.card {
  /* 子元素可自行定位 */
  grid-column: span 2;          /* 跨列 */
}

5. 响应式设计（Responsive Design）核心技巧

2026 年主流策略（mobile-first + container queries 趋势）

Mobile-first + media queries

.card {
  padding: 1rem;
}

@media (min-width: 768px) {
  .card {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

Container Queries（组件级响应式，2023–2026 大杀器）

.card-container {
  container-type: inline-size;   /* 声明容器 */
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
}

优点：组件真正可复用，不依赖页面宽度
支持度：2026 年已 >95%，可放心用

6. 常见实用属性速查（日常 Top 20）

属性家族	高频属性示例	备注
文字	color, font-size, font-weight, line-height, text-align	—
间距	margin, padding, gap	gap 是 flex/grid 神器
边框	border, border-radius	border-radius: 9999px → 圆形
背景	background-color, background-image, background-size: cover	—
阴影	box-shadow: 0 4px 6px rgba(0,0,0,0.1)	neumorphism / glassmorphism 常用
定位	position: relative / absolute / sticky / fixed	—
显示	display: none / block / flex / grid / contents	contents 很有用
溢出	overflow: hidden / auto	—
过渡/动画	transition: all 0.3s; transform	will-change: transform 优化