课程进度 18% · 第4/20章第4/20章 · 标签 1/2
— 1 —
块级/内联/浮动布局
- 块级元素（block）：独占一行，如div、p、h1等
- 内联元素（inline）：不换行，如span、a、img等
- display属性可切换元素类型
```css
<style>
.block { display: block; width: 100%; }
.inline { display: inline; }
.inline-block { display: inline-block; width: 100px; }
</style>
<div class="block">块级元素</div>
<span class="inline">内联元素</span>
```
css
1
<style>
2
.block { display: block; width: 100%; }
3
.inline { display: inline; }
4
.inline-block { display: inline-block; width: 100px; }
5
</style>
6
<div class="block">块级元素</div>
7
<span class="inline">内联元素</span>
浮动布局
- float: left/right：元素向左/右浮动
- clear: both：清除浮动影响
- 父容器需清除浮动避免高度塌陷
```css
/* 浮动布局 */
.left { float: left; width: 60%; }
.right { float: right; width: 35%; }
.clearfix::after {
content: "";
display: table;
clear: both;
}
```
css
1
/* 浮动布局 */
2
.left { float: left; width: 60%; }
3
.right { float: right; width: 35%; }
4
.clearfix::after {
5
content: "";
6
display: table;
7
clear: both;
8
}
— 2 —
弹性盒（Flex）
Flexbox是一维布局模型，适合行/列方向的排列。
- 容器属性：flex-direction、justify-content、align-items
- 项目属性：flex、order、align-self
```css
/* Flex布局 */
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.item { flex: 1; margin: 10px; }
```
css
1
/* Flex布局 */
2
.container {
3
display: flex;
4
justify-content: space-between;
5
align-items: center;
6
flex-wrap: wrap;
7
}
8
.item { flex: 1; margin: 10px; }
网格（Grid）
Grid是二维布局模型，适合行列同时控制的布局。
```css
/* Grid布局 */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.item { grid-column: span 2; }
```
css
1
/* Grid布局 */
2
.container {
3
display: grid;
4
grid-template-columns: 1fr 1fr 1fr;
5
gap: 20px;
6
}
7
.item { grid-column: span 2; }
块级内联浮动FlexGrid