re:从0开始的CSS学习之路 10. 盒子模型的溢出

1. 盒子模型的溢出

父子两个盒子,子盒子的宽度或高度,大于父盒子,则子盒子多余的部分会在父盒子之外进行显示

多余的部分,称为"溢出的部分"

overflow属性,可以设置父元素如何处理溢出的内容

可选值
visible 不会处理溢出部分(默认值)
hidden 溢出的内容隐藏
scroll 为父元素添加滚动条
auto 会根据需要自动的添加滚动条

示例如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	.father {
		width: 200px;
		height: 200px;
		background-color: #c7edcc;
	
		overflow: auto;
	}
	
	.son {
		width: 100px;
		height: 1000px;
		background-color: #fde6e0;
	}
</head>

<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

</html>

通过修改.father overflow来查看son的显示变化

相关推荐
Zoey的笔记本5 分钟前
2026告别僵化工作流:支持自定义字段的看板工具选型与部署指南
大数据·前端·数据库
小二·8 分钟前
Python Web 开发进阶实战:混沌工程初探 —— 主动注入故障,构建高韧性系统
开发语言·前端·python
进阶小白猿11 分钟前
Java技术八股学习Day20
java·开发语言·学习
gis开发11 分钟前
【无标题】
java·前端·javascript
小二·13 分钟前
Python Web 开发进阶实战:低代码平台集成 —— 可视化表单构建器 + 工作流引擎实战
前端·python·低代码
慧一居士39 分钟前
Vite 中配置环境变量方法及完整示例
前端·vue.js
renhongxia11 小时前
学习基于数字孪生的工艺参数优化
学习
天意pt1 小时前
Idempotency 幂等性 - 点赞和投票功能
前端·javascript·express
gjf05_051 小时前
人该怎样活着呢?版本68.6
学习
GISer_Jing1 小时前
AI Agent 智能体的“深度思考”与“安全防线”
人工智能·学习·安全·aigc