原生 CSS（层叠样式表）是用于控制网页外观和布局的核心技术，以下从基础到进阶梳理其核心知识体系：
### 一、CSS 基础语法
1. **语法结构**由「选择器」和「声明块」组成，声明块包含一个或多个 `属性: 值;` 键值对：
css
```
选择器 {
属性1: 值1;
属性2: 值2;
}
```
例：
css
```
p {
color: red;
font-size: 16px;
}
```
1. **引入方式**
- **内联样式**：直接写在 HTML 标签的 `style` 属性中（优先级最高，不推荐）：
html
预览
```
文本
```
- **内部样式**：写在 HTML 的 `
```
- **外部样式**：单独的 `.css` 文件，通过 `` 引入（推荐，可复用）：
html
预览
```
```
### 二、选择器（核心）
用于定位 HTML 元素，决定样式作用的目标：
1. **基础选择器**
- **元素选择器**：直接匹配标签名（如 `p`、`div`）。
- **类选择器**：匹配 `class` 属性，以 `.` 开头（如 `.active`）。
- **ID 选择器**：匹配 `id` 属性，以 `#` 开头（如 `#header`，唯一）。
- **通配符**：`*` 匹配所有元素（慎用，性能差）。
1. **组合选择器**
- **后代选择器**：`A B` 匹配 A 内部的所有 B（无论嵌套层级）。
- **子选择器**：`A > B` 仅匹配 A 的直接子元素 B。
- **相邻兄弟选择器**：`A + B` 匹配 A 后面紧邻的第一个 B。
- **通用兄弟选择器**：`A ~ B` 匹配 A 后面所有同级的 B。
1. **属性选择器**
- `[attr]`：匹配有 `attr` 属性的元素（如 `[disabled]`）。
- `[attr=value]`：匹配 `attr` 属性值为 `value` 的元素（如 `[type="text"]`）。
1. **伪类选择器**（动态 / 状态选择）
- 状态类：`:hover`（鼠标悬停）、`:active`（点击时）、`:focus`（获焦时）。
- 结构类：`:first-child`（第一个子元素）、`:nth-child(2)`（第 2 个子元素）。
- 否定类：`:not(.class)`（排除特定类的元素）。
1. **伪元素选择器**（创建虚拟元素）
- `::before`：在元素内容前插入虚拟元素（需配合 `content` 属性）。
- `::after`：在元素内容后插入虚拟元素。
- `::first-letter`：匹配文本的第一个字符。
### 三、优先级与层叠
当多个样式作用于同一元素时，优先级决定最终生效的样式：
1. **优先级规则**（从高到低）：
- 内联样式（`style` 属性）。
- ID 选择器（`#id`）。
- 类 / 属性 / 伪类选择器（`.class`、`[attr]`、`:hover`）。
- 元素 / 伪元素选择器（`div`、`::before`）。
- 通配符（`*`）和继承样式。
1. **权重计算**：用四元组 `(a, b, c, d)` 表示，`a` 最高：
- `a`：内联样式（1 或 0）。
- `b`：ID 选择器数量。
- `c`：类 / 属性 / 伪类选择器数量。
- `d`：元素 / 伪元素选择器数量。例：`#header .nav li` 权重为 `(0, 1, 1, 1)`。
1. **`!important`**：强制提升样式优先级（如 `color: red !important;`），谨慎使用（破坏自然优先级）。
### 四、盒子模型（Box Model）
所有 HTML 元素都被视为盒子，由四部分组成（从内到外）：
1. **内容区（content）** ：显示文本和图像，大小由 `width`、`height` 控制。
1. **内边距（padding）** ：内容区与边框的距离（`padding-top`、`padding: 10px 20px`）。
1. **边框（border）** ：包裹内边距和内容区（`border: 1px solid #000`）。
1. **外边距（margin）** ：盒子与其他元素的距离（`margin-bottom`、`margin: 0 auto` 水平居中）。
- **盒模型模式**：
- `box-sizing: content-box`（默认）：`width`/`height` 仅包含内容区。
- `box-sizing: border-box`（推荐）：`width`/`height` 包含内容区 + 内边距 + 边框（避免计算麻烦）。
### 五、布局技术
#### 1. 普通流（Normal Flow）
元素默认的布局方式：块级元素（`div`、`p`）垂直排列，行内元素（`span`、`a`）水平排列。
#### 2. 浮动（Float）
让元素脱离普通流，向左 / 右移动，直到碰到父元素边缘或其他浮动元素：
css
```
.float-left { float: left; }
.float-right { float: right; }
```
- 注意：浮动会导致父元素高度坍塌，需清除浮动（如父元素加 `overflow: hidden` 或使用 `::after` 伪元素）。
#### 3. 定位（Position）
控制元素在页面中的精确位置：
- `static`（默认）：遵循普通流，不接受 `top`/`left` 等属性。
- `relative`：相对自身原有位置偏移，不脱离普通流（占位）。
- `absolute`：相对最近的非 `static` 定位祖先元素偏移，脱离普通流（不占位）。
- `fixed`：相对浏览器窗口定位，固定在屏幕某个位置（如导航栏）。
- `sticky`：滚动时在指定位置（`top: 0`）固定，兼具 `relative` 和 `fixed` 特性。
#### 4. Flex 布局（弹性布局）
一维布局模型，通过「容器」和「项目」的属性控制排列：
- **容器属性**：
- `display: flex`：启用 Flex 布局。
- `flex-direction`：主轴方向（`row` 水平 /`column` 垂直）。
- `justify-content`：主轴对齐方式（`center` 居中 /`space-between` 两端对齐）。
- `align-items`：交叉轴对齐方式（`center` 居中 /`flex-start` 顶部对齐）。
- `flex-wrap`：项目是否换行（`wrap` 换行 /`nowrap` 不换行）。
- **项目属性**：
- `flex: 1`：项目占剩余空间的比例（自适应拉伸）。
- `order`：控制项目排列顺序（数值越小越靠前）。
- `align-self`：单独设置项目的交叉轴对齐方式。
#### 5. Grid 布局（网格布局）
二维布局模型，适合复杂的多行多列布局：
- **容器属性**：
- `display: grid`：启用 Grid 布局。
- `grid-template-columns`：定义列数和宽度（`repeat(3, 1fr)` 3 列等宽）。
- `grid-template-rows`：定义行数和高度（`100px 200px` 2 行，高度分别为 100px 和 200px）。
- `gap`：列 / 行之间的间距（`gap: 10px` 行列间距均为 10px）。
- `justify-items`/`align-items`：网格项在单元格内的对齐方式。
- **项目属性**：
- `grid-column: 1 / 3`：项目跨第 1 到第 3 列（占 2 列）。
- `grid-row: 2 / 4`：项目跨第 2 到第 4 行（占 2 行）。
### 六、文本与字体
1. **文本样式**
- `color`：文字颜色（`#ff0000`、`rgb(255,0,0)`、`red`）。
- `font-size`：字体大小（`16px`、`1rem`、`1.2em`）。
- `font-weight`：字重（`normal`、`bold`、`600`）。
- `text-align`：水平对齐（`left`、`center`、`right`）。
- `line-height`：行高（`1.5` 倍文字大小，垂直居中常用）。
- `text-decoration`：文本装饰（`none` 去除下划线、`underline` 下划线）。
1. **字体设置**
- `font-family`：字体族（`"Microsoft YaHei", sans-serif`，优先使用前者，无则用系统默认 sans-serif）。
- `@font-face`：引入自定义字体：
css
```
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
}
```
### 七、背景与边框
1. **背景**
- `background-color`：背景色（`#f0f0f0`）。
- `background-image`：背景图（`url("bg.jpg")`）。
- `background-repeat`：背景图是否重复（`no-repeat` 不重复）。
- `background-position`：背景图位置（`center` 居中）。
- `background-size`：背景图大小（`cover` 覆盖容器 /`contain` 完整显示）。
- 简写：`background: #f0f0f0 url("bg.jpg") no-repeat center/cover`。
1. **边框**
- `border: width style color`（`border: 1px solid #ccc`）。
- `border-radius`：圆角（`50%` 圆形，`8px` 圆角矩形）。
- `box-shadow`：阴影（`0 2px 4px rgba(0,0,0,0.1)` 水平偏移 0、垂直偏移 2px、模糊 4px、半透明黑）。
### 八、响应式设计
使网页在不同设备（手机、平板、电脑）上自适应显示：
1. **媒体查询（@media）** 根据屏幕尺寸应用不同样式：
css
```
/* 屏幕宽度 ≤ 768px 时生效 */
@media (max-width: 768px) {
.container {
width: 100%;
}
}
```
常见断点：
- 手机：`max-width: 767px`
- 平板：`min-width: 768px and max-width: 1023px`
- 桌面：`min-width: 1024px`
1. **相对单位**
- `rem`：相对于根元素（`html`）的 `font-size`（默认 `1rem = 16px`）。
- `em`：相对于父元素的 `font-size`。
- `vw/vh`：相对于视口宽度 / 高度的 1%（`50vw` 即视口宽度的一半）。
1. **弹性图片**
css
```
img {
max-width: 100%; /* 图片不超过容器宽度 */
height: auto; /* 保持宽高比 */
}
```
### 九、动画与过渡
1. **过渡（Transition）** 使样式变化更平滑（如 hover 效果）：
css
```
.btn {
transition: background-color 0.3s, transform 0.3s; /* 监听属性及持续时间 */
}
.btn:hover {
background-color: blue;
transform: scale(1.1); /* 放大1.1倍 */
}
```
1. **动画（Animation）** 更复杂的自定义动画，需定义关键帧：
css
```
/* 定义关键帧 */
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 应用动画 */
.box {
animation: rotate 2s linear infinite; /* 动画名、持续时间、匀速、无限循环 */
}
```
1. **变换（Transform）** 改变元素的形状、位置或角度：
- `translate(Xpx, Ypx)`：平移
- `scale(1.2)`：缩放
- `rotate(45deg)`：旋转
- `skew(10deg)`：倾斜
### 十、CSS 变量（自定义属性）
复用样式值，方便维护：
css
```
/* 定义变量（通常在 :root 伪类，全局可用） */
:root {
--primary-color: #3B82F6;
--font-size: 16px;
}
/* 使用变量 */
body {
color: var(--primary-color);
font-size: var(--font-size);
}
```
### 总结
原生 CSS 核心围绕「选择器定位元素」→「通过属性控制样式」→「用布局技术排列元素」→「响应式适配多设备」→「动画提升交互体验」。掌握这些基础后，可进一步学习 CSS 架构（如 BEM 命名规范）、性能优化（减少重绘重排）等进阶内容。
