# CSS Layout
这部分只解决一个问题：你能不能把已经写好的 HTML 结构，变成清晰、好读、布局正确的页面。
## 学完后你应该掌握
- CSS 选择器的基本使用
- 常见组合选择器和伪类
- 盒模型的组成
- `display` 的常见取值
- 宽高、边距、边框、背景的控制
- Flex 布局的核心属性
- Grid 布局的基础用法
- 定位 `position` 的基础用法
- `overflow`、文档流和常见居中方式
- 如何把一个普通 HTML 页面排成可读的界面
## CSS 是什么
CSS 负责的是页面的视觉和布局。
它回答的是：
- 元素长什么样
- 元素之间怎么排
- 间距有多大
- 文字颜色、大小、背景是什么
如果 HTML 是骨架，CSS 就是排版和外观。
## 必须建立的 5 个核心意识
### 1. 先有结构，再有样式
CSS 不是替代 HTML。
正确顺序是：
1. 先把 HTML 结构写清楚
2. 再用 CSS 调整视觉和布局
### 2. 你写的不是“好看”，而是“规则”
CSS 不是一条条临时修补。
你写的是一组规则，例如：
```css
.card {
padding: 16px;
border: 1px solid #d0d7de;
}
```
意思是：所有 `class="card"` 的元素都遵守这套样式。
### 3. 先控制外部间距，再控制内部间距
- `margin`：元素和外面的距离
- `padding`：内容和边框的距离
这是初学 CSS 最容易混的地方。
### 4. 布局优先用 Flex
现代页面里，很多一维布局都优先用 Flex：
- 水平排列
- 垂直居中
- 两端对齐
- 等宽分栏
### 5. 少写“碰运气”的样式
比如乱写固定高度、随意加很多空格、靠多个 `br` 撑页面，这些都不是可靠布局。
## 高频属性速记
### 盒模型
- `width`
- `height`
- `padding`
- `border`
- `margin`
- `box-sizing`
### 文字与颜色
- `color`
- `font-size`
- `font-weight`
- `line-height`
- `text-align`
### 背景与边框
- `background`
- `background-color`
- `border`
- `border-radius`
- `box-shadow`
### 布局
- `display`
- `flex`
- `justify-content`
- `align-items`
- `gap`
- `grid-template-columns`
- `place-items`
### 定位
- `position`
- `top`
- `right`
- `bottom`
- `left`
- `z-index`
- `sticky`
- `fixed`
## 学习顺序
1. 选择器与基础样式
2. 盒模型
3. `display`
4. Flex 布局
5. 定位
6. 综合页面练习
## 练习目录
- [01-selectors-and-text/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/README.md)
- [02-box-model-card/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/README.md)
- [03-flex-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/README.md)
- [04-position-badge/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/README.md)
- [05-final-page/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/README.md)
- [06-display-and-flow/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/06-display-and-flow/README.md)
- [07-selectors-and-pseudo-classes/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/07-selectors-and-pseudo-classes/README.md)
- [08-overflow-and-sizing/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/08-overflow-and-sizing/README.md)
- [09-grid-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/09-grid-layout/README.md)
- [10-fixed-and-sticky/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/10-fixed-and-sticky/README.md)
- [11-centering-lab/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/11-centering-lab/README.md)
## 过关标准
如果你能独立做到下面这些，就说明你的 CSS 已经入门：
- 能看懂并写出常见选择器
- 能写后代选择器、子代选择器和伪类
- 能分清 `margin`、`padding`、`border`
- 能用 Flex 写出横向排列和居中
- 能用 Grid 写基础网格布局
- 能理解相对定位和绝对定位的配合
- 能理解 `fixed`、`sticky`、`overflow` 的常见场景
- 能把一个简单页面排成可读的布局
## 学习建议
- 每次先观察页面分区，再决定写哪些类名
- 少堆无意义类名，类名尽量体现用途
- 先写大布局，再修文字、颜色、边框
- 写完后删掉无效样式，保持规则干净