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

相关推荐
专注于大数据技术栈几秒前
java学习--==和equals
java·python·学习
中工钱袋15 分钟前
前端请求到底是从哪里发出去的?
前端
专注VB编程开发20年3 小时前
Excel软件界面美化-WEBUI-webbrowser内核
css·excel·vba·webui
じòぴé南冸じょうげん3 小时前
若依框架favicon.ico缓存更新问题解决方案:本地生效但线上未更新
前端·javascript·前端框架·html
狮子座的男孩3 小时前
js基础高级:01、数据类型(typeof、instanceof、===的使用)、数据与变量与内存(定义、赋值与内存关系、引用变量赋值、js调函数传参)
前端·javascript·经验分享·数据类型·数据与变量与内存·赋值与内存关系·引用变量赋值
Cyclo-6 小时前
PDFJS 在React中的引入 使用组件打开文件流PDF
前端·react.js·pdf
智商低情商凑8 小时前
Go学习之 - Goroutines和channels
开发语言·学习·golang
椒盐螺丝钉8 小时前
Vue Router应用:组件跳转
前端·javascript·vue.js
顾安r9 小时前
11.20 开源APP
服务器·前端·javascript·python·css3
敲敲了个代码9 小时前
CSS 像素≠物理像素:0.5px 效果的核心密码是什么?
前端·javascript·css·学习·面试