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的显示变化

相关推荐
u130130几秒前
深入解析二维码技术与前端生成方案
前端·二维码
世人万千丶4 分钟前
Day 5: Flutter 框架 SQLite 数据库进阶 - 在跨端应用中构建结构化数据中心
数据库·学习·flutter·sqlite·harmonyos·鸿蒙·鸿蒙系统
丝斯20117 分钟前
AI学习笔记整理(53)——大模型之Agent 智能体开发
人工智能·笔记·学习
星火开发设计8 分钟前
循环结构进阶:while 与 do-while 循环的适用场景
java·开发语言·数据结构·学习·知识·循环
青衫码上行11 分钟前
Maven高级:分模块、聚合继承、多环境配置与私服搭建
java·学习·maven
小范馆11 分钟前
STM32F03C8T6通过AT指令获取天气API-下篇
前端·stm32·esp8266-01s
开开心心_Every17 分钟前
无广告输入法推荐:内置丰富词库免费皮肤
服务器·前端·学习·决策树·edge·powerpoint·动态规划
科技林总20 分钟前
【系统分析师】4.4 网络工程
学习
卓怡学长1 小时前
m111基于MVC的舞蹈网站的设计与实现
java·前端·数据库·spring boot·spring·mvc
C_心欲无痕6 小时前
前端实现水印的两种方式:SVG 与 Canvas
前端·安全·水印