Skip to main content

CSS 基础与扩展说明

本文整理 CSS 常用基础能力：定位、选择器与组合、盒子模型、display/float、对齐、伪类与伪元素、图像与媒体、动画，并附扩展用法与可运行思路。适合作为速查与学习笔记。

1. 定位（position）​

1.1 取值概要​

值脱离文档流参考系典型用途
static否无默认，不参与 top/left
relative否（仍占位）自身原位置微调偏移、给绝对子元素建坐标系
absolute是最近已定位祖先，否则视口弹层角标、悬浮按钮
fixed是视口（viewport）顶栏、底栏、全屏遮罩
sticky特殊在滚动到阈值前像 relative，之后像 fixed表头吸顶、目录跟随

1.2 常用配套属性​

  • top / right / bottom / left：与 position 非 static 时生效。
  • z-index：只对定位元素或产生层叠上下文的元素有意义；数值在同一父级层叠上下文中比较。

1.3 示例（相对 + 绝对）​

.card { position: relative; }
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

1.4 扩展​

  • 层叠上下文：opacity < 1、transform、filter 等会新建层叠上下文，可能导致 z-index「不如预期」；调试时用 DevTools 看「层叠」面板。
  • sticky 失效常见原因：父级 overflow: hidden/auto 截断滚动链；未设 top/bottom 之一；粘性元素父级高度不够。
  • fixed 在移动端：注意地址栏伸缩，全屏可用 100dvh 等与视口单位配合（见媒体与视口扩展）。

2. 选择器基础​

2.1 基本类型​

  • 类型选择器：div、p。
  • 类选择器：.btn（可多个类名）。
  • ID 选择器：#app（文档内建议唯一，权重高）。
  • 属性选择器：[type="text"]、[class^="icon-"]（前缀）、[href*="example"]（包含）。

2.2 组合与权重（简略）​

  • 权重大致：内联样式 > ID > 类/属性/伪类 > 标签/伪元素。
  • 同权重后声明覆盖先声明；尽量用单一可维护策略（如 BEM + 低特异性）。

2.3 扩展​

  • :is()：article :is(h1, h2, h3) 等价多选，权重以参数中最高的部分计算。
  • :where()：与 :is() 类似，但权重为 0，适合基础样式库便于覆盖。

3. 组合选择器（Combinators）​

写法含义
A B后代：A 内任意层级 B
A > B子代：仅 A 的直接子元素 B
A + B相邻兄弟：紧接在 A 后的第一个 B
A ~ B一般兄弟：A 之后所有同级 B

示例：列表第一项高亮、表单单选后显示说明块，常配合 + 或 ~。

扩展​

  • :has()（父级条件）：.field-group:has(input:invalid) 在子元素无效时高亮父容器（需考虑浏览器支持范围）。

4. 盒子模型（box model）​

4.1 组成​

从外到内：margin → border → padding → content。
width/height 默认作用于 content 盒（标准盒模型）。

4.2 box-sizing​

*, *::before, *::after { box-sizing: border-box; }
  • border-box：width 含 padding + border，布局更可预期（现代项目常用）。

4.3 扩展​

  • 外边距折叠（margin collapse）：相邻垂直 margin 可能合并；可用 padding、border、overflow、flex/grid 子项等打断。
  • min-width: 0：flex/grid 子项里长内容溢出时，常需设置以避免「撑破」布局。

5. display 与 float​

5.1 display 常见值​

值要点
block独占一行，可设宽高
inline行内，宽高多数无效
inline-block行内 + 可设宽高
flex一维弹性布局
grid二维栅格
none不渲染、不占位（与 visibility: hidden 不同）

5.2 float（浮动）​

  • 历史用于图文环绕；现代布局优先 flex/grid。
  • 父级需清除浮动（如 overflow: auto、伪元素 clearfix），否则高度塌陷。
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

5.3 表格相关 display​

  • table、table-row、table-cell 可模拟表格对齐或垂直居中（旧技巧）；新项目更推荐 flex/grid。

6. 元素对齐​

6.1 行内 / 行内块垂直对齐​

  • vertical-align：用于 inline/inline-table/table-cell 等，常见于图标与文字基线对齐。

6.2 Flex 对齐（一维场景）​

  • 主轴：justify-content（如 center、space-between）。
  • 交叉轴：align-items（单行）、align-content（多行换行时）。

6.3 Grid 对齐（二维场景）​

  • justify-items / align-items：单元格内对齐。
  • justify-content / align-content：整网格栅格在容器内分布。
  • 单个格子：justify-self / align-self。

6.4 绝对定位居中​

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

也可用 inset: 0; margin: auto; + 固定宽高实现块级居中。

6.5 扩展​

  • 安全区：固定底栏对齐可用 padding-bottom: env(safe-area-inset-bottom)。
  • 逻辑属性：margin-inline: auto 做水平居中，利于 RTL 文案。

7. 伪类（pseudo-classes）​

伪类表示元素状态或文档树中的位置，写法用一个冒号（规范上部分写作双冒号历史兼容仍单冒号）。

7.1 常见伪类​

  • 链接：:link、:visited
  • 交互：:hover、:active、:focus、:focus-visible（键盘焦点更明显，利于无障碍）
  • 表单：:checked、:disabled、:invalid、:placeholder-shown
  • 结构：:first-child、:last-child、:nth-child(n)、:nth-of-type(n)、:only-child
  • 否定：:not(.skip)

7.2 扩展示例思路​

  • 只看键盘焦点：.btn:focus-visible { outline: 2px solid ... }
  • 空状态：:empty 配合占位文案样式。

8. 伪元素（pseudo-elements）​

用双冒号书写（::before、::after 等），表示生成的额外节点（在元素内部内容前后）。

8.1 常用伪元素​

  • ::before / ::after：配合 content 做图标、装饰、tooltip 小三角（需 content: "" 才可显示）。
  • ::first-line / ::first-letter：首行/首字排版。
  • ::selection：选中文字样式。

8.2 示例（装饰条）​

.title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 8px;
  background: #38bdf8;
}

8.3 扩展​

  • ::backdrop：全屏元素（如 <dialog> 原生弹窗）背后的遮罩样式。
  • 伪元素默认是 inline，要设宽高时常写 display: block 或 inline-block。

9. 图像与「拼接」（雪碧图 / sprite）​

「图像拼接」常指 CSS Sprite：多张小图合并一张大图，用 background-position 只露出一部分，减少 HTTP 请求。

9.1 雪碧图基本写法​

.icon {
  width: 24px;
  height: 24px;
  background-image: url(sprites.png);
  background-repeat: no-repeat;
  background-position: -48px -24px; /* 按设计坐标调整 */
}

9.2 扩展​

  • 现代更常见：SVG sprite、icon font、或打包工具内联小图；大图仍可用雪碧图但维护成本较高。
  • object-fit（作用于 <img> / <video>）：cover / contain 控制裁切与比例。
  • image-set()：根据分辨率选择合适背景图。
.hero {
  background-image: image-set(
    url("hero-1x.webp") 1x,
    url("hero-2x.webp") 2x
  );
}

10. 媒体（@media）与响应式​

10.1 基本媒体查询​

@media (max-width: 768px) {
  .layout { flex-direction: column; }
}

10.2 常用特性​

  • width / height、min-width、orientation: portrait
  • prefers-color-scheme：深浅色 light / dark
  • prefers-reduced-motion：减少动画 reduce
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

（上面为激进降级示例；生产环境可仅对关键动效逐项关闭。）

10.3 扩展​

  • @container（容器查询）：组件随父容器宽度变化，而不只看视口。
  • 视口单位：dvh、svh、lvh 缓解移动端 100vh 与地址栏问题。

11. 动画与过渡​

11.1 transition​

适合两个状态之间的平滑变化（hover、class 切换）。

.btn {
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

11.2 @keyframes + animation​

适合多关键帧、循环、延迟等复杂时间线。

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}
.dot { animation: pulse 1.2s ease-in-out infinite; }

11.3 性能与扩展​

  • 优先动画 transform、opacity，尽量避免频繁动画 width、top、height（易触发布局）。
  • animation-fill-mode：forwards 保持结束状态。
  • will-change：谨慎使用，动画结束可移除，避免占显存。
  • 无障碍：配合 prefers-reduced-motion 提供减弱或静态替代。

12. 学习路径建议​

  1. 先熟练：盒模型 + display + flex 对齐。
  2. 再掌握：定位 + z-index + 层叠上下文。
  3. 然后：选择器组合 + 伪类/伪元素 做状态与装饰。
  4. 进阶：媒体查询、过渡/动画、图像与响应式资源。

如需与项目对齐，可把本文各节标题做成 checklist，每完成一节补一个最小 demo（单 HTML 单文件即可）。