front-end-example/02-css-layout

CSS Layout

这部分只解决一个问题：你能不能把已经写好的 HTML 结构，变成清晰、好读、布局正确的页面。

学完后你应该掌握

• CSS 选择器的基本使用
• 常见组合选择器和伪类
• 盒模型的组成
• display 的常见取值
• 宽高、边距、边框、背景的控制
• Flex 布局的核心属性
• Grid 布局的基础用法
• 定位 position 的基础用法
• overflow、文档流和常见居中方式
• 如何把一个普通 HTML 页面排成可读的界面

CSS 是什么

CSS 负责的是页面的视觉和布局。

它回答的是：

• 元素长什么样
• 元素之间怎么排
• 间距有多大
• 文字颜色、大小、背景是什么

如果 HTML 是骨架，CSS 就是排版和外观。

必须建立的 5 个核心意识

1. 先有结构，再有样式

CSS 不是替代 HTML。

正确顺序是：

1. 先把 HTML 结构写清楚
2. 再用 CSS 调整视觉和布局

2. 你写的不是“好看”，而是“规则”

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 的常见场景
• 能把一个简单页面排成可读的布局

学习建议

• 每次先观察页面分区，再决定写哪些类名
• 少堆无意义类名，类名尽量体现用途
• 先写大布局，再修文字、颜色、边框
• 写完后删掉无效样式，保持规则干净