课堂笔记：浮动实现四张图片并排布局

课堂笔记：浮动实现四张图片并排布局

一、全局样式重置

css

* {
  margin: 0;
  padding: 0;
}

• 作用：清除所有元素默认的外边距和内边距，使布局从零开始，避免浏览器默认样式干扰。

---

二、整体结构

页面只有一个大的容器 .flower，内部包含四个子容器：.A、.B、.C、.D。
每个子容器中放置一张图片。

html

<div class="flower">
  <div class="A"><img src="img/01.png"/></div>
  <div class="B"><img src="img/02.png"/></div>
  <div class="C"><img src="img/03.png"/></div>
  <div class="D"><img src="img/04.png"/></div>
</div>

---

三、父容器样式（.flower）

css

.flower {
  margin: 0 auto;
  width: 1000px;
  /* 高度和背景色被注释，未生效 */
}

• 水平居中：margin: 0 auto 配合固定宽度 1000px，使整个相册区域在浏览器中居中。
• 宽度固定：总宽度 1000px，用来容纳四个浮动子元素及其外边距、内边距、边框。
• 注意：父容器没有设置高度，其高度由内部浮动子元素撑开（但浮动会导致父容器高度塌陷，此处因未清除浮动，父容器实际高度为0，但视觉上由于子元素仍占据空间，不影响显示）。

---

四、子容器样式（.A、.B、.C、.D 样式完全相同）

css

.A, .B, .C, .D {
  float: left;              /* 左浮动，实现并排 */
  width: 150px;             /* 内容宽度 */
  height: 120px;            /* 内容高度 */
  padding: 5px 10px 50px;   /* 上5px 左右10px 下50px */
  border: 1px solid black;  /* 黑色实线边框 */
  margin: 11px 39px 12px;   /* 上11px 左右39px 下12px */
}

1. 浮动并排

• float: left; 让四个 div 从正常文档流中脱离，在同一行从左向右排列。

2. 盒子模型尺寸计算

每个子容器的实际占宽 = 左边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右边距

代入数值：

• 左边距：margin-left: 39px（因为 margin: 11px 39px 12px 左右都是39px）
• 左边框：1px
• 左内边距：10px
• 内容宽度：150px
• 右内边距：10px
• 右边框：1px
• 右边距：39px

计算：39 + 1 + 10 + 150 + 10 + 1 + 39 = 250px

3. 四个容器总宽度

每个容器占宽 250px，四个并排总宽度 = 250 × 4 = 1000px
正好等于父容器 .flower 的宽度（1000px），因此四个盒子恰好填满一行，不会换行。

4. 内边距与图片显示

• padding: 5px 10px 50px;
  • 上内边距 5px
  • 左右内边距各 10px
  • 下内边距 50px（为图片下方留出较大空白）
• 图片 img 默认是行内元素，会被包裹在 div 的内容区中，显示在左上角（受 padding 影响偏移）。

5. 边框与外边距

• border: 1px solid black; 给每个图片卡片加上黑色边框。
• margin: 11px 39px 12px; 上方留白 11px，左右留白 39px，下方留白 12px，形成卡片之间的间距以及与父容器边缘的间距。

---

五、视觉效果总结

属性	值	作用
父容器宽度	1000px	水平居中，限制总宽度
子元素浮动	float: left	实现四列并排
每个子元素占宽	250px（实际）	四个总和 = 1000px，正好一行
内容区尺寸	150×120px	图片显示区域
内边距	上5、左右10、下50	控制图片位置，下方留白
边框	1px solid black	卡片分隔线
外边距	上11、左右39、下12	卡片之间的间距

---

六、代码结构图示

text

body
│
└── .flower（宽1000px，水平居中）
    │
    ├── .A（浮动，宽150px，高120px，内边距+边框+外边距）
    │   └── img（图片01）
    │
    ├── .B（相同样式）
    │   └── img（图片02）
    │
    ├── .C（相同样式）
    │   └── img（图片03）
    │
    └── .D（相同样式）
        └── img（图片04）