vault backup: 2026-04-24 23:45:19

2026-04-24 23:45:19 +08:00
parent 388d4439de
commit f05be3890e
21 changed files with 3816 additions and 0 deletions
@@ -0,0 +1,148 @@
+---
+tags: [前端, CSS, 基础]
+create time: 2026-04-24 18:41
+---
+
+# CSS 基础
+
+## 概述
+
+CSS（Cascading Style Sheets）负责网页的视觉呈现。如果说 HTML 是骨架，CSS 就是皮肤和衣服。掌握 CSS 的核心是理解三个概念：**选择器**（选谁）、**盒模型**（有多大）、**布局**（怎么排）。
+
+思考题：为什么 CSS 叫做"层叠"样式表？多个规则作用于同一个元素时，浏览器如何决定用哪一个？
+
+## 正文
+
+### 1. CSS 引入方式
+
+```html
+<!-- 方式一：行内样式（不推荐） -->
+<p style="color: red; font-size: 16px;">红色文字</p>
+
+<!-- 方式二：内部样式表 -->
+<style>
+    p { color: blue; }
+</style>
+
+<!-- 方式三：外部样式表（推荐） -->
+<link rel="stylesheet" href="styles.css">
+```
+
+### 2. 选择器优先级
+
+```
+!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符
+     10000       1000       100           10           1           0
+```
+
+```css
+/* 优先级实战 */
+div .item { color: red; }      /* 0*1000 + 1*100 + 1*10 = 110 */
+div p.item { color: blue; }    /* 0*1000 + 1*100 + 1*10 + 1*1 = 111 */
+#main .item { color: green; }  /* 1*1000 + 0*100 + 1*10 = 1010 */
+```
+
+> **提问：** 如果一个元素同时被 `.a { color: red }` 和 `#b { color: blue }` 选中，最终颜色是什么？为什么？
+
+### 3. 盒模型（Box Model）
+
+每个元素都是一个盒子，由四部分组成：
+
+```mermaid
+block-beta
+    columns 1
+    margin["margin 外边距\n（透明，不影响盒子大小）"]
+    border["border 边框"]
+    padding["padding 内边距\n（盒子内部，影响背景色）"]
+    content["content 内容区\n（实际文字/图片）"]
+```
+
+```css
+/* 两种盒模型的区别 */
+.box-content-box {
+    box-sizing: content-box;   /* 默认：width = content 宽度 */
+}
+.box-border-box {
+    box-sizing: border-box;    /* 推荐：width = content + padding + border */
+}
+```
+
+> **核心要点：** 实际开发中建议全局使用 `box-sizing: border-box`，避免尺寸计算混乱。
+
+### 4. Flexbox 布局（一维布局首选）
+
+```css
+.container {
+    display: flex;
+    justify-content: center;    /* 主轴居中 */
+    align-items: center;        /* 交叉轴居中 */
+    gap: 16px;                  /* 子元素间距 */
+}
+
+.item {
+    flex: 1;                    /* 等宽分配 */
+    /* 或者 flex: 0 0 200px;  固定宽度 */
+}
+```
+
+Flexbox 常用属性速查：
+
+| 属性 | 作用 |
+|------|------|
+| `display: flex` | 启用 flex 布局 |
+| `justify-content` | 主轴对齐（center / space-between / space-around） |
+| `align-items` | 交叉轴对齐（center / flex-start / stretch） |
+| `flex-direction` | 主轴方向（row / column） |
+| `gap` | 子元素间距 |
+
+> **提问：** 什么时候用 Flexbox，什么时候用 Grid？它们的本质区别是什么？
+
+### 5. Grid 布局（二维布局神器）
+
+```css
+.grid-container {
+    display: grid;
+    grid-template-columns: 200px 1fr 1fr;  /* 三列：固定 + 自适应 */
+    grid-template-rows: auto 1fr auto;      /* 三行：自动 + 弹性 + 自动 */
+    gap: 20px;
+}
+
+/* 响应式网格 */
+.grid-responsive {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+```
+
+```mermaid
+graph TD
+    A["display: grid"] --> B["grid-template-columns\n定义列"]
+    A --> C["grid-template-rows\n定义行"]
+    A --> D["gap\n间距"]
+    A --> E["justify/align\n对齐"]
+```
+
+### 6. 响应式设计
+
+```css
+/* 媒体查询：不同屏幕尺寸应用不同样式 */
+.container {
+    width: 100%;
+    padding: 0 20px;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 0 10px;
+    }
+    .grid-layout {
+        grid-template-columns: 1fr;  /* 窄屏单列 */
+    }
+}
+```
+
+> **关键概念：** 移动端优先（Mobile First）是现代响应式设计的最佳实践——先写移动端样式，再用 `min-width` 媒体查询逐步增强。
+
+## 关联笔记
+
+- [[HTML 基础]] — CSS 的搭档，HTML 提供结构，CSS 提供样式
+- [[JavaScript 基础]] — 通过 JS 动态修改 CSS，实现交互效果