---
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，实现交互效果