CSS：样式、布局与响应式设计

一条 CSS 规则#

.lesson-card {
  padding: 24px;
  color: #1d1d1f;
  background: #ffffff;
  border: 1px solid #d2d2d7;
  border-radius: 20px;
}

.lesson-card 是选择器，花括号内是声明。padding 是属性，24px 是值。

先理解盒模型#

每个元素都像一个纸箱：内容在最里面，依次是内边距 padding、边框 border、外边距 margin。

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

使用 border-box 后，声明的宽高会包含内边距和边框，更容易计算。

层叠、继承和优先级#

CSS 会合并多条规则。后出现不一定永远获胜，还要比较选择器优先级和规则来源。初学时：

用清晰的类名设置组件样式；
避免过长的选择器；
少用 !important；
利用开发者工具查看哪条规则被覆盖。

Flex 与 Grid#

Flex 适合一维排列，例如导航和按钮组：

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

Grid 适合二维页面和卡片网格：

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

不要用大量固定定位拼页面。先让内容参与正常文档流，再选择布局工具。

移动优先响应式#

先写手机样式，再在屏幕足够宽时增强：

.page { padding: 16px; }

@media (min-width: 768px) {
  .page { padding: 32px; }
}

响应式检查#

页面在 320、375、768、1024、1440px 不产生整体横向滚动；
正文至少 16px，行高约 1.5–1.8；
图片最大宽度为 100%；
按钮和链接触控区域至少 44×44px；
表格自身可横向滚动，不能撑破页面；
不禁用用户缩放。

可访问的颜色和焦点#

正文与背景对比度至少 4.5:1。鼠标悬停不是唯一反馈，键盘焦点也要清楚：

:focus-visible {
  outline: 3px solid #0071e3;
  outline-offset: 3px;
}

需要理解#

相对单位：rem、em、百分比、视口单位；
自定义属性（CSS 变量）管理颜色和间距；
position 的几种模式与堆叠上下文；
伪类和伪元素；
过渡与动画；
reduced motion、深色模式和打印样式。

:root {
  --color-text: #1d1d1f;
  --space-3: 24px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition: none; }
}

常见错误#

只在自己的电脑宽度测试；
用固定高度装正文，文字增多后溢出；
到处写重复色值和间距；
用极大的 z-index 解决所有遮挡；
文字使用很浅的灰色；
为了动画改变宽高，引起页面跳动；
没有焦点样式或直接去掉 outline。

动手练习#

给 HTML 学习档案添加样式：手机单栏、平板两栏、桌面三栏；设计导航、进度条、课程卡片、表单、表格和焦点状态。用开发者工具切换尺寸，并把发现的问题记录下来。

完成标准#

能解释盒模型和 border-box。
能分别用 Flex 和 Grid 完成合适布局。
页面在常见尺寸没有主体横向滚动。
键盘焦点可见，正文对比度合格。
改变文字长度后布局仍稳定。