Python Day30 CSS 定位与弹性盒子详解 - 指南

一、定位（Position）

定位用于控制元素在页面中的位置，常见的定位方式包括相对定位、绝对定位、固定定位和粘性定位。

1. 相对定位（position: relative）

• 特点：相对于元素自身原始位置偏移，不脱离文档流，原始位置仍占用空间。
• 用途：常作为子元素绝对定位的参照物（父相子绝）。

示例代码：

.parent {
position: relative; /* 父元素设为相对定位，作为参照物 */
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.child {
position: relative;
top: 20px; /* 相对于原始位置向下偏移20px */
left: 30px; /* 相对于原始位置向右偏移30px */
width: 100px;
height: 100px;
background-color: #ff6b6b;
}

2. 绝对定位（position: absolute）

• 特点：相对于最近的非 static 定位祖先元素偏移，脱离文档流，不占用原始空间。
• 用途：精确定位元素，如弹窗、下拉菜单。

示例代码：

.parent {
position: relative; /* 父元素为参照物 */
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.child {
position: absolute;
top: 50px; /* 距离父元素顶部50px */
right: 20px; /* 距离父元素右侧20px */
width: 100px;
height: 100px;
background-color: #4ecdc4;
}

3. 固定定位（position: fixed）

• 特点：相对于浏览器视口偏移，脱离文档流，滚动页面时位置不变。
• 用途：导航栏、悬浮广告、回到顶部按钮。

示例代码：

.fixed-btn {
position: fixed;
bottom: 30px; /* 距离浏览器底部30px */
right: 30px; /* 距离浏览器右侧30px */
width: 50px;
height: 50px;
background-color: #ffd166;
border-radius: 50%;
}
滚动页面，固定按钮位置不变...

4. 粘性定位（position: sticky）

• 特点：未达阈值时为相对定位（随滚动移动），达阈值后为固定定位（位置不变）。
• 用途：列表标题、表格头部固定。

示例代码：

.sticky-title {
position: sticky;
top: 0; /* 阈值：滚动到顶部时固定 */
padding: 10px;
background-color: #06d6a0;
color: white;
}
.content {
height: 100px; /* 模拟列表项高度 */
border: 1px solid #eee;
}
列表标题（滚动时固定）
内容1
内容2
内容3
内容4
内容5

二、弹性盒子（Flexbox）

弹性盒子是一种响应式布局模型，通过 display: flex 开启，用于灵活排列子元素。

核心属性

属性	作用	常用值
flex-direction	设置主轴方向	row（水平）、column（垂直）等
flex-wrap	控制子元素是否换行	wrap（换行）、nowrap（不换行）
justify-content	主轴对齐方式	center（居中）、space-between（两端对齐）等
align-items	侧轴对齐方式	center（居中）、flex-start（起始对齐）等

示例代码

.flex-box {
display: flex; /* 开启弹性盒子 */
flex-direction: row; /* 主轴为水平方向 */
flex-wrap: wrap; /* 子元素超出时换行 */
justify-content: space-between; /* 主轴两端对齐，子元素间距相等 */
align-items: center; /* 侧轴居中对齐 */
width: 500px;
height: 200px;
background-color: #f8f9fa;
padding: 10px;
}
.flex-item {
width: 100px;
height: 80px;
background-color: #118ab2;
margin: 5px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
1
2
3
4

效果说明：4 个弹性项在水平方向排列，超出容器宽度时自动换行，主轴上两端对齐，侧轴（垂直方向）居中对齐。

三、综合案例（左右布局 + 弹性盒子）

综合案例
* {
margin: 0;
padding: 0;
}
/* 左右布局（绝对定位实现） */
.left {
width: 15%;
height: 100vh; /* 占满浏览器高度 */
background-color: #eaeaea;
}
.right {
position: absolute;
top: 0;
right: 0;
left: 15%; /* 与左侧15%宽度衔接 */
height: 100vh;
background-color: #ffd166;
}
/* 右侧弹性盒子 */
.right .flex-box {
display: flex;
flex-direction: column; /* 垂直排列 */
justify-content: center; /* 主轴（垂直）居中 */
align-items: center; /* 侧轴（水平）居中 */
height: 100%;
}
.right .flex-box a {
margin: 10px;
color: #333;
text-decoration: none;
font-size: 18px;
}
百度
腾讯

效果说明：页面分为左右两栏（左侧占 15% 宽度，右侧占 85%），右侧使用弹性盒子垂直居中排列链接。

案例一：轮播图（Swiper）

核心知识点

• 相对定位与绝对定位：轮播容器（.swiper）设为相对定位，作为子元素（指示器、控制按钮）的定位参照物；指示器（.tips）和控制按钮（.ctrl）用绝对定位固定在容器内指定位置。
• 图片显示控制：默认隐藏所有图片（display: none），仅显示第一张（img:first-child {display: block}），配合指示器实现切换逻辑。
• 交互效果：控制按钮（prev/next）添加 hover 背景色变化，提升用户体验。

完整代码

轮播图案例
.swiper{
position: relative; /* 相对定位：作为子元素的定位参照物 */
width: 100%;
height: 900px; /* 轮播图高度，占满视口主要区域 */
}
.swiper img{
display: none; /* 默认隐藏所有图片 */
width: 100%;
height: 100%; /* 图片自适应容器大小 */
object-fit: cover; /* 保持图片比例，覆盖容器 */
}
.swiper img:first-child{
display: block; /* 仅显示第一张图片 */
}
/* 指示器样式：底部圆点导航 */
.swiper .tips{
position: absolute; /* 绝对定位：相对于.swiper定位 */
bottom: 0px;
width: 100%;
height: 80px;
font-size: 0; /* 消除inline元素间距 */
line-height: 80px; /* 垂直居中文字 */
text-align: center; /* 水平居中 */
}
.tips span{
display: inline-block; /* 使padding生效 */
margin: 0 5px; /* 圆点间距 */
padding: 5px 50px; /* 圆点大小（实际为矩形，可改为圆形） */
background-color: rgba(150,150,150,0.5); /* 半透明灰色 */
border-radius: 4px; /* 圆角美化 */
cursor: pointer; /* 鼠标悬停显示手型 */
}
.swiper .tips .active{
background-color: rgba(184, 173, 21, 0.5); /* 激活状态为半透明黄色 */
}
/* 控制按钮：左右箭头 */
.swiper .ctrl{
position: absolute; /* 绝对定位：垂直居中 */
height: 50px;
width: 100%;
top: 50%; /* 基于容器高度居中 */
transform: translateY(-50%); /* 微调垂直居中 */
}
/* 按钮hover效果 */
.swiper .ctrl .prev:hover,
.swiper .ctrl .next:hover{
background-color: rgba(92, 91, 91, 0.5); /* 悬停时加深背景 */
}
.swiper .ctrl .prev{
float: left; /* 左对齐 */
width: 50px;
height: 100%;
background-image: url(https://blog.csdn.net/ihghhfffv/article/img/left.png); /* 左箭头图片 */
background-size: 40px 40px; /* 图片大小 */
background-repeat: no-repeat; /* 不重复 */
background-position: center center; /* 图片居中 */
border-radius: 50%; /* 圆形按钮 */
background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
margin-left: 15px; /* 左间距 */
cursor: pointer; /* 鼠标悬停显示手型 */
}
.swiper .ctrl .next{
float: right; /* 右对齐 */
width: 50px;
height: 100%;
background-image: url(https://blog.csdn.net/ihghhfffv/article/img/right.png); /* 右箭头图片 */
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
margin-right: 15px; /* 右间距 */
cursor: pointer;
}

案例二：圆形钟表

核心知识点

• 绝对定位精确定位：钟表的刻度、指针、数字均通过绝对定位（position: absolute）固定在圆形表盘的指定位置。
• 圆形容器实现：通过border-radius: 50%将方形容器（.box）转为圆形表盘。
• 层级与布局：通过top/left属性调整元素位置，实现钟表的对称结构（12/3/6/9 刻度、时针 / 分针 / 秒针）。

完整代码

圆形钟表案例
*{
padding: 0;
margin: 0; /* 清除默认内外边距 */
}
.box{
position: relative; /* 作为子元素的定位参照物 */
border: 2px solid black; /* 表盘边框 */
background-color: rgb(173, 175, 174); /* 表盘背景色 */
width: 400px;
height: 400px;
border-radius: 50%; /* 圆形表盘 */
margin: 50px auto; /* 居中显示 */
}
/* 刻度样式：上下左右四个主刻度 */
.shu,.shu1,.heng,.heng1{
background-color: black; /* 刻度颜色 */
position: absolute; /* 绝对定位 */
}
.shu{ /* 上刻度（12点方向） */
top: 0px;
left: 199px; /* 水平居中（表盘宽400px，刻度宽2px，199=200-0.5） */
width: 2px;
height: 20px; /* 刻度长度 */
}
.shu1{ /* 下刻度（6点方向） */
top: 382px; /* 400-20+2（边框）=382 */
left: 200px;
width: 2px;
height: 20px;
}
.heng{ /* 左刻度（9点方向） */
top: 199px; /* 垂直居中（400/2 - 0.5） */
left: 0px;
width: 20px;
height: 2px;
}
.heng1{ /* 右刻度（3点方向） */
top: 199px;
left: 382px; /* 400-20+2=382 */
width: 20px;
height: 2px;
}
.center{ /* 圆心 */
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%; /* 圆形圆心 */
position: absolute;
top: 195px; /* 200（中心）-5（半径）=195 */
left: 195px;
z-index: 10; /* 层级高于指针，覆盖指针末端 */
}
/* 指针样式 */
.houer{ /* 时针 */
width: 10px;
height: 50px; /* 最短指针 */
background-color: rgb(8, 17, 138); /* 蓝色 */
position: absolute;
top: 150px; /* 200-50=150（从中心向上延伸） */
left: 195px; /* 水平居中 */
transform-origin: center bottom; /* 旋转原点：底部（圆心位置） */
}
.min{ /* 分针 */
width: 6px; /* 比时针细 */
height: 100px; /* 比时针长 */
background-color: rgb(30, 146, 20); /* 绿色 */
position: absolute;
top: 100px; /* 200-100=100 */
left: 197px;
transform-origin: center bottom;
}
.sc{ /* 秒针 */
width: 3px; /* 最细 */
height: 150px; /* 最长 */
background-color: black; /* 黑色 */
position: absolute;
top: 50px; /* 200-150=50 */
left: 198.5px;
transform-origin: center bottom;
}
/* 数字刻度（12/3/6/9） */
.time12,.time9,.time6,.time3{
position: absolute;
font-size: 20px;
font-weight: bold;
}
.time12{ /* 12点 */
top: 15px;
left: 188px; /* 水平居中 */
}
.time3{ /* 3点 */
top: 185px;
left: 365px; /* 右侧 */
}
.time6{ /* 6点 */
top: 355px;
left: 194.5px;
}
.time9{ /* 9点 */
top: 185px;
left: 25px; /* 左侧 */
}
12
3
6
9

案例三：任务管理系统界面

核心知识点

• 浮动布局（float）：顶部导航菜单（.dh1 li）和任务筛选条件（.rwjd li等）用浮动实现横向排列。
• 下拉菜单实现：用户菜单（.yh）默认隐藏（display: none），鼠标悬停父元素时显示（li:first-child:hover .yh {display: block}）。
• 弹性盒子布局：任务卡片列表（.tm）用display: flex和flex-wrap: wrap实现自适应换行排列。
• hover 交互效果：任务卡片顶部（.top）hover 时隐藏原有内容，显示 “分享任务” 按钮（.clone）。

完整代码

任务管理系统界面
* {
padding: 0;
margin: 0; /* 清除默认样式 */
box-sizing: border-box; /* 盒模型：border和padding计入宽高 */
}
/* 顶部导航栏 */
.title {
height: 60px;
background-color: #01AAED; /* 蓝色背景 */
border-radius: 10px 0 0 0; /* 左上角圆角 */
position: relative; /* 作为子元素定位参照物 */
}
h2 {
color: white;
line-height: 60px; /* 垂直居中 */
margin-left: 10px;
}
.title .dh1 {
position: absolute;
top: 0px;
right: 0px; /* 靠右对齐 */
}
.title .dh1>li {
color: white;
width: 90px;
text-align: center;
line-height: 40px;
height: 60px; /* 与导航栏同高 */
float: right; /* 横向排列 */
list-style: none; /* 去除列表符号 */
padding: 10px;
cursor: pointer; /* 鼠标悬停手型 */
}
.title .dh1>li:hover {
background-color: #1890ec; /* 悬停背景色变深 */
}
/* 下拉菜单（用户菜单） */
.dh1>li:first-child:hover .yh {
display: block; /* 悬停时显示下拉菜单 */
}
.yh {
width: 110px;
position: absolute;
top: 60px; /* 与导航栏底部对齐 */
right: 0px;
display: none; /* 默认隐藏 */
list-style: none;
background-color: rgb(104, 176, 224);
color: white;
cursor: pointer;
z-index: 100; /* 层级高于其他元素 */
}
.yh>li:hover {
background-color: #009f95; /* 下拉项悬停色 */
}
.dh1>li:first-child {
background-image: url(https://blog.csdn.net/ihghhfffv/article/img/用户.png); /* 用户图标 */
background-size: 40px;
background-repeat: no-repeat;
background-position: 0 center;
background-position-x: -5px; /* 图标位置微调 */
}
/* 搜索区 */
.search {
background-color: #f1f5f4; /* 浅灰背景 */
text-align: center;
padding: 10px 0;
}
.search input {
margin: 20px;
padding-left: 10px;
padding-right: 10px;
width: 600px;
height: 30px;
border-radius: 10px; /* 圆角输入框 */
border: 1px solid rgb(165, 164, 164);
}
/* 筛选条件（任务阶段/难度/状态） */
.rwjd, .rwzt, .nycd {
height: 40px;
margin: 0 auto;
width: 800px; /* 固定宽度，居中 */
overflow: hidden; /* 清除浮动影响 */
}
.rwjd li, .rwzt li, .nycd li {
float: left; /* 横向排列 */
padding: 0 10px;
list-style: none;
cursor: pointer;
height: 40px;
line-height: 40px; /* 垂直居中 */
}
.rwjd li:first-child, .rwzt li:first-child, .nycd li:first-child {
padding-top: 2px;
font-family: 楷体;
font-weight: 600;
font-size: 18px; /* 标题样式 */
}
.rwjd li:nth-child(2), .rwzt li:nth-child(2), .nycd li:nth-child(2) {
background-color: #CCCCCC; /* 默认选中项背景 */
}
.rwjd li:nth-child(2):hover, .rwzt li:nth-child(2):hover, .nycd li:nth-child(2):hover {
background-color: #e9e9e9;
}
.rwjd li:first-child:hover, .rwzt li:first-child:hover, .nycd li:first-child:hover {
background-color: rgb(241, 245, 244); /* 标题项悬停不改变背景 */
}
.rwjd li:hover, .rwzt li:hover, .nycd li:hover {
background-color: #e9e9e9; /* 选项悬停背景 */
}
/* 任务卡片列表 */
.tm {
margin: 0 auto;
padding: 14px;
width: 100%;
max-width: 860px; /* 最大宽度限制 */
display: flex; /* 弹性布局 */
flex-wrap: wrap; /* 超出换行 */
gap: 8px; /* 卡片间距 */
}
.main {
border: 1px solid rgba(0, 0, 0, 0.1);
width: 200px;
height: 200px;
box-sizing: border-box; /* 边框计入宽高 */
position: relative;
}
/* 任务卡片顶部 */
.main .top {
position: relative;
height: 30px;
background-image: linear-gradient(to right, #01AAED 50%, #5fb878 50%); /* 左右渐变背景 */
}
.main .body {
position: relative;
height: 130px;
font-size: 12px;
display: flex; /* 内容垂直排列 */
padding: 5px;
}
.body>p {
margin: 10px;
overflow: hidden; /* 超出隐藏 */
}
.top .left_p {
float: left;
font-size: 12px;
line-height: 30px;
font-weight: 600;
color: rgb(238, 235, 235);
padding-left: 5px;
}
.top .right_p {
float: right;
color: rgb(238, 235, 235);
font-size: 12px;
line-height: 30px;
padding-right: 20px;
}
/* 三角形分割线（顶部左右渐变分割） */
.triangle {
position: absolute;
top: 0;
left: 98px; /* 50%宽度位置 */
width: 0;
height: 0;
border-top: 30px solid #01AAED; /* 左半部分颜色 */
border-right: 30px solid transparent; /* 右半部分透明 */
}
/* 任务状态标签 */
.ztbq {
position: absolute;
top: 75px;
right: 5px;
width: 50px;
height: 50px;
border-radius: 50px;
background-image: url(https://blog.csdn.net/ihghhfffv/article/img/未开始.png); /* 状态图标 */
background-size: 50px 50px;
background-repeat: no-repeat;
}
/* 卡片顶部hover效果（显示分享按钮） */
.clone {
display: none; /* 默认隐藏 */
position: absolute;
top: 0;
left: 0;
line-height: 30px;
color: white;
font-size: 14px;
font-weight: 600;
width: 100%;
text-align: center;
}
.main .top:hover .left_p,
.main .top:hover .right_p,
.main .top:hover .triangle {
display: none; /* hover时隐藏原有内容 */
}
.main .top:hover .clone {
display: block; /* 显示分享按钮 */
background-color: #ff5722; /* 按钮背景色 */
}
/* 卡片底部操作栏 */
.main .foot {
height: 40px;
border-top: solid 1px rgba(0, 0, 0, 0.1);
}
.foot ul {
line-height: 40px;
overflow: hidden; /* 清除浮动 */
}
.foot li {
float: left; /* 横向排列 */
margin-left: 8px;
margin-right: 8px;
list-style: none;
font-size: 12px;
}
.foot li:hover {
cursor: pointer;
color: #01AAED; /* 悬停文字变色 */
}
/* 分页 */
.last {
width: 100%;
margin: 20px auto;
text-align: center; /* 居中 */
}
.last ul {
display: inline-flex; /* 横向排列且居中 */
padding: 0;
margin: 0 auto;
}
.last li {
margin: 5px 8px;
height: 18px;
min-width: 18px;
line-height: 18px;
text-align: center;
list-style: none;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #d9d9d9;
}
.last li:hover {
background-color: #cccccc; /* 悬停背景 */
}
.last li:first-child {
background-color: #01AAED; /* 当前页背景 */
color: white;
}
奇酷-任务管理系统
用户名
切换系统
更换密码
切换班级
退出登录
文件中心
任务中心
任务阶段
不限
第一阶段
第二阶段
第三阶段
第四阶段
第五阶段
难易程度
不限
简单题
中等题
难题
选做题
任务状态
不限
未开始
进行中
不会做
已提交
已检查
异常题
已完成
【简】第二阶段
css样式
分享任务
使用定位技术完成圆形钟表的制作、包含 12、3、6、9 四个刻度。 圆心、时针、分针、和 秒针 。 且效果为 12 点整 效果即可！
查看
修改
参考
完成
【简】第二阶段
css样式
分享任务
使用定位技术绘制一个太极图案（注意观察太极图的特点） 提示 background-image: linear-gradient(to right, #000 50%, #fff 50%); 该样式可以实现 一半黑一半白
查看
修改
参考
完成
1
2
3
4
5
6
7
8
...
16
17

案例四：天气预报界面

核心知识点

• 弹性盒子布局（flex）：整体容器（.box）用flex-direction: column实现垂直排列；每日天气项（.data div）用flex分配宽度，实现网格布局。
• flex-wrap 换行：每日天气列表（.data）用flex-wrap: wrap实现超出容器宽度时自动换行。
• 背景图片与图标：天气图标（.icon）通过background-image设置，配合background-size和background-position调整显示效果。

完整代码

天气预报界面
.box{
width: 840px; /* 7列*120px=840px */
display: flex;
flex-flow: column nowrap; /* 垂直排列，不换行 */
background-color: rgb(105, 163, 202); /* 蓝色背景 */
margin: 50px auto; /* 居中显示 */
border-radius: 8px; /* 圆角容器 */
overflow: hidden; /* 隐藏内部元素超出部分 */
}
/* 标题栏 */
.box .title{
flex: 0 1 60px; /* 固定高度60px，不拉伸，可收缩 */
line-height: 60px; /* 垂直居中 */
color: white;
font-size: 20px;
font-weight: bold;
padding-left: 20px; /* 左缩进 */
background-color: rgba(0,0,0,0.1); /* 半透明背景 */
}
/* 星期栏 */
.box .week{
display: flex; /* 水平排列 */
flex: 0 1 60px; /* 固定高度60px */
align-items: center; /* 垂直居中 */
background-color: rgba(0,0,0,0.05);
}
.box .week > span{
text-align: center;
flex: 1 1 auto; /* 平均分配宽度 */
color: white;
font-size: 16px;
}
/* 每日天气列表 */
.box .data{
display: flex;
flex-wrap: wrap; /* 超出换行 */
}
/* 每日天气项 */
.box .data div{
display: flex;
flex-direction: column; /* 内部垂直排列 */
flex: 0 0 120px; /* 固定宽度120px（7列） */
box-sizing: border-box;
text-align: center;
border: 1px solid rgba(200, 200, 200,0.2); /* 浅色边框 */
color: white;
border-right: none; /* 右侧边框合并 */
border-bottom: none; /* 底部边框合并 */
padding: 8px 10px;
}
.box .data div *{
padding: 8px; /* 内部元素间距 */
font-size: 14px;
}
.box .data .day{
align-self: flex-start; /* 左对齐 */
flex-basis: 40px; /* 固定高度 */
font-size: 18px;
font-weight: bold;
}
.box .data .icon{
flex-basis: 40px; /* 图标固定高度 */
background-image: url(https://blog.csdn.net/ihghhfffv/article/details/img/冻雨.png); /* 天气图标 */
background-size: 40px 40px; /* 图标大小 */
background-repeat: no-repeat;
background-position: center center; /* 图标居中 */
}
未来四十天天气预报
周日
周一
周二
周三
周四
周五
周六
1
25~33℃
小雨
东风一级
优
2
25~33℃
小雨
东风一级
优
49
25~33℃
小雨