feat: Add CSS layout exercises and corresponding HTML files
- Created multiple exercises under the CSS layout section, including: - Final page layout with CSS styles and HTML structure. - Display and flow concepts with examples of block, inline, and none display types. - Selectors and pseudo-classes with practical examples. - Overflow and sizing handling in CSS. - Grid layout basics for two-dimensional layouts. - Fixed and sticky positioning examples. - Centering techniques for common layout scenarios. - Added README files for each exercise to outline objectives and file structures. - Updated main README to include new sections and usage instructions.
This commit is contained in:
chali
166
02-css-layout/README.md
Normal file
166
02-css-layout/README.md
Normal file
@@ -0,0 +1,166 @@
|
||||
# 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` 的常见场景
|
||||
- 能把一个简单页面排成可读的布局
|
||||
|
||||
## 学习建议
|
||||
|
||||
- 每次先观察页面分区，再决定写哪些类名
|
||||
- 少堆无意义类名，类名尽量体现用途
|
||||
- 先写大布局，再修文字、颜色、边框
|
||||
- 写完后删掉无效样式，保持规则干净
|
||||
Reference in New Issue
Block a user