Klein's-blue的博客

记录生活，分享技术

0%

CSS 基础概念

CSS 基础概念详解（2025-2026 最新常用知识）

1. CSS 是什么？它的作用

CSS 全称 Cascading Style Sheets（层叠样式表）

主要作用：

  • 控制网页的外观与布局（颜色、大小、间距、字体、位置、动画等）
  • 实现结构（HTML）与样式分离
  • 提供响应式、自适应设计能力
  • 统一网站风格，提高维护效率

2. CSS 的三种引入方式

引入方式 写法示例 作用范围 优先级 维护性 使用场景
内联样式 <div style="color:red;font-size:16px"> 当前元素 ★★★★★ ★ 临时修改、邮件HTML、动态样式
内部样式表 <style> .box { color: blue; } </style> 当前文档 ★★★★ ★★★ 小型项目、单页、快速原型
外部样式表 <link rel="stylesheet" href="style.css"> 整个网站/多页面 ★★★ ★★★★★ 最推荐 的正规项目方式

现代开发最推荐的引入顺序（优先级由高到低）：

  1. Reset / Normalize / 基础样式（external）
  2. 组件库样式（如 Ant Design / Element Plus / Tailwind）
  3. 项目公共样式（external）
  4. 页面/模块内部样式（internal 或 external）
  5. 内联样式（尽量避免大量使用）

3. CSS 层叠与优先级（Cascading & Specificity）⭐⭐⭐⭐⭐

CSS 的最终样式是由以下几个维度综合决定的（从高到低）：

  1. !important（最高，几乎无敌，但慎用）
  2. 来源与重要性（浏览器默认 < 用户样式 < 作者样式）
  3. 选择器优先级（Specificity） ← 最常考察
  4. 代码书写顺序（同等优先级时，后写的覆盖前面的）

3.1 选择器优先级计算规则（Specificity）

选择器类型 权重分数 示例 记忆口诀
行内样式 1,0,0,0 style=”color:red” 千位
id 选择器 0,1,0,0 #header 百位
class/属性/伪类 0,0,1,0 .box, [type=”text”], :hover 十位
元素/伪元素 0,0,0,1 div, p, ::before, ::after 个位
通配符/组合符/继承 0,0,0,0 *, >, +, ~, 继承的 color 等 没分

比较规则：从左到右逐位比较，谁先大谁赢，前面位相同再看后面位

1
2
3
4
5
6
7
8
/* 优先级对比示例 */
#app .box a             /* 0,1,0,1 */
div#app a               /* 0,1,0,1 */   ← 相同
.container a:hover      /* 0,0,2,1 */
a:link                  /* 0,0,1,1 */
div a                   /* 0,0,0,2 */
a                       /* 0,0,0,1 */
*                       /* 0,0,0,0 */

3.2 important的使用原则

能不用！千万别用！！
实在非用不可 → 尽量用在工具类、hack、覆盖第三方库上

4 CSS的基础语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* 基本结构 */
选择器 {
  属性名: 属性值;
  属性名: 属性值;
}

/* 推荐写法（现代前端规范） */
.box {
  /* 1. 布局方式 & 定位 */
  position: relative;
  display: flex;
  /* 2. 盒模型相关 */
  width: 100%;
  height: 200px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  /* 3. 文字排版 */
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  /* 4. 背景与边框 */
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  /* 5. 动画 & 交互 */
  transition: all 0.3s ease;
}

/* 多选择器写法 */
h1, h2, h3,
.heading {
  color: #2c3e50;
  margin-bottom: 1em;
}

/* 属性值多行写法（长列表常用） */
.box {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

6 CSS注释写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 单行注释 */

/*
  多行注释
  可以写很长很长
  用来写模块说明、TODO 等
*/

/* 常用区块划分注释写法 */
 /*********************************
  *          头部导航区域          *
  *********************************/

/*------------------------------
  卡片列表
------------------------------*/

CSS常见的长度单位描述

单位 特点 相对对象 推荐场景 使用频率（2025）
px 绝对单位，固定像素 屏幕像素 边框、阴影、极细线、设计稿1:1还原 ★★★★☆
em 相对当前元素 font-size 自身font-size 组件内部间距、文字相关（少用） ★★☆☆☆
rem 相对根元素（html）font-size :root / html 全局统一字体、间距、主单位（推荐） ★★★★★
vw/vh 相对视口宽度/高度 1% 当前视窗 全屏模块、大标题、横幅、H5 适配 ★★★★☆
vmin vw 和 vh 中较小的那个 — 正方形、等比缩放 ★★☆☆☆
vmax vw 和 vh 中较大的那个 — — ★☆☆☆☆
% 相对父元素的对应属性 父级 布局宽度/高度、padding/margin 等 ★★★★☆
ch 字符”0”的宽度 字体 等宽排版、表单对齐 ★★☆☆☆
ex 当前字体中小写 x 的高度 字体 极少使用 ★☆☆☆☆