149 lines
4.0 KiB
Markdown
149 lines
4.0 KiB
Markdown
---
|
||
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，实现交互效果
|