📚 Web前端课堂笔记（CSS布局与定位）

一、完整代码整合

1. HTML 结构（卡片布局）

亿贝CALI

了解有关选项卡和选项卡快捷方式、加速器和 In

>>了解详情

2. CSS 样式（含所有课堂代码） /* 1. 外层容器（控制整体宽度和边距） */ .card { width: 403px; margin-left: 70px; padding-bottom: 18px; }

/* 2. 图片样式：左浮动，实现图文并排 */
.img1 {
float: left;
width: 122px;
height: 152px;
}

/* 3. 文字模块样式：左浮动，和图片并排 */
.txt {
float: left;
width: 262px;
margin-left: 17px;
}

/* 4. 标题区样式 /
.txt h2 {
margin-bottom: 12px;
}
.txt h2 a {
color: #3a0c00;
font-size: 16px;
text-decoration: none; / 可选：去掉链接下划线 */
}

/* 5. 说明文本区 */
.txt2 {
height: 68px;
margin-bottom: 6px;
}

/* 6. 底部按钮区：父容器设置相对定位，给子元素做参考 /
.at2 {
height: 39px;
line-height: 39px; / 实现文字垂直居中 /
position: relative;
}
.at2 a {
color: #af4f02;
}
/ 了解详情文字：绝对定位，固定在容器右下角 */
.at2 span {
position: absolute;
right: 0;
bottom: 0;
}
二、核心知识点速记

1. 浮动布局（float）

• 作用：让元素脱离默认文档流，实现图文并排、多列布局

• 本次用法：

◦ .img1 和 .txt 都设置了 float: left，让图片和文字左右排列

◦ 注意：浮动元素会影响父容器高度，后续可以用 overflow: hidden 清除浮动

2. 定位机制（position）
   属性值 作用 课堂用法
   relative 相对定位，不脱离文档流，可作为子元素定位参考 .at2 设置 position: relative，作为父容器
   absolute 绝对定位，脱离文档流，相对于最近的relative父容器定位 .at2 span 设置 position: absolute，实现文字靠右对齐

• 关键口诀：父相子绝（父元素设relative，子元素设absolute）

3. 常用布局属性

• margin：控制元素之间的外边距（如 margin-bottom 控制模块间距）

• padding：控制元素内部的内边距（如 padding-bottom 控制容器底部内边距）

• width/height：固定元素宽高，保证排版整齐

• line-height：设置行高，和容器高度一致时，可实现单行文本垂直居中