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

相关推荐
kgduu2 分钟前
js之错误处理
开发语言·前端·javascript
德莱厄斯2 分钟前
Milkup 技术内幕:一个 Typora 风格的即时渲染 Markdown 编辑器是怎样炼成的
前端·javascript·markdown
你怎么知道我是队长9 分钟前
计算机系统基础21---计算机的基本组成---Cache的地址映射方式
学习
Mintopia12 分钟前
架构师的心胸:把分歧装进系统,把人放在方案前
前端·架构
亿元程序员13 分钟前
不是说现在AI很牛吗,怎么连个高光Shader效果都写不好?
前端
孟祥_成都16 分钟前
金三银四,一个面试官连连夸赞的个人网页技术分享
前端·面试·three.js
aaajj17 分钟前
【Android】appops学习
android·学习
山川行17 分钟前
Git学习笔记:Git进阶操作
笔记·git·vscode·学习·编辑器·visual studio code
nqqcat~17 分钟前
hlist哈希链表学习笔记
学习·链表·哈希算法
兆子龙23 分钟前
Vite 插件系统与构建流水线源码解析:从 Rollup 插件到 HMR
前端