课堂笔记：浮动布局实现三行多列固定宽度页面

课堂笔记：浮动布局实现三行多列固定宽度页面

一、全局样式重置

css

* {
  margin: 0;
  padding: 0;
}

• 作用：清除所有元素默认的外边距和内边距，保证布局精确，避免浏览器默认样式影响。

---

二、整体页面结构

页面分为三个主要容器（都是水平居中，宽度固定 1000px）：

1. 顶部区域 .top
2. 中间区域 .main
3. 底部区域 .bottom

---

三、顶部区域（.top）

父容器样式

css

.top {
  margin: 0 auto;      /* 水平居中 */
  width: 1000px;
  height: 200px;
  background-color: red;
}

内部子元素：A 和 B

类名	宽度	高度	浮动	背景色	文字居中方式
.A	150px	200px	float: left;	pink	text-align: center; + line-height: 200px;
.B	850px	200px	float: left;	purple	同上

• 并排原理：两个 div 都设置 float: left，使它们脱离正常文档流，在一行内从左到右排列。
• 宽度总和：150px + 850px = 1000px，正好等于父容器宽度，不会换行。
• 文字居中：
  • text-align: center → 水平居中。
  • line-height: 200px（等于高度）→ 单行文本垂直居中。

---

四、中间区域（.main）

父容器样式

css

.main {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: blue;
}

内部子元素：C、D、E

类名	宽度	高度	浮动	背景色	文字居中方式
.C	250px	200px	float: left;	cornflowerblue	text-align: center; + line-height: 200px;
.D	500px	200px	float: left;	cadetblue	同上
.E	250px	200px	float: left;	cornflowerblue	同上

• 三栏并排：三个元素全部左浮动，宽度总和 250+500+250 = 1000px，正好填满父容器。
• 背景色区分：C 和 E 颜色相同（cornflowerblue），D 不同（cadetblue）。

---

五、底部区域（.bottom）

css

.bottom {
  margin: 0 auto;
  width: 1000px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: yellow;
}

• 独立块级元素：没有使用浮动，按照正常文档流排在 .main 下方。
• 尺寸：宽度 1000px，高度 100px。
• 文字居中：水平居中（text-align）+ 垂直居中（line-height 等于高度）。
• 背景色：黄色。

---

六、关键知识点总结

知识点	说明
margin: 0 auto	块级元素水平居中，需要配合固定宽度。
float: left	让多个块级元素在一行内并排排列。
浮动宽度总和	浮动子元素的宽度之和必须 ≤ 父容器宽度，否则会换行。
text-align: center	使行内元素或文本在块级元素中水平居中。
line-height 垂直居中	设置 line-height 等于 height，可实现单行文本垂直居中。
固定宽度布局	所有主要容器宽度一致（1000px），整体左右对齐一致。

---

七、代码结构图示

text

body
│
├── .top（宽1000px，高200px，红色）
│   ├── .A（宽150px，高200px，粉色，左浮动）
│   └── .B（宽850px，高200px，紫色，左浮动）
│
├── .main（宽1000px，高200px，蓝色）
│   ├── .C（宽250px，高200px，浅蓝色，左浮动）
│   ├── .D（宽500px，高200px，青绿色，左浮动）
│   └── .E（宽250px，高200px，浅蓝色，左浮动）
│
└── .bottom（宽1000px，高100px，黄色，无浮动）