CSS overflow属性

最新推荐文章于 2023-11-10 18:14:22 发布

今天也是爱大大的一天吖

最新推荐文章于 2023-11-10 18:14:22 发布

阅读量482

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_45560350/article/details/106618807

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

定义

overflow属性规定当内容溢出元素框时该如何处理。

属性可能的取值

值	描述
visible	默认值内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容不可见
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承overflow属性的值

1.overflow:visible(默认值)

<style>
	div{
		width: 150px;
		height: 100px;
		background: YELLOW;
		overflow: visible;
	}
</style>
<body>
	<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
	</p>
    <div>
	这个属性定义溢出元素内容区的内容会如何处理。如果值为 visible，内容不会被修剪，会呈现在元素框之外。
	</div>
</body>

在这里插入图片描述
2.overflow:hidden

<style>
	div{
		width: 150px;
		height: 100px;
		background: YELLOW;
		overflow: hidden;
	}
</style>
<body>
	<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
	</p>

    <div>
	这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，内容不会被修剪，会呈现在元素框之外。
	</div>
</body>

在这里插入图片描述
3.overflow:scroll

<style>
	div{
		width: 150px;
		height: 200px;
		background: YELLOW;
		overflow: scroll;
	}
</style>
<body>
	<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
	</p>

    <div>
	这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
	</div>
</body>

在这里插入图片描述
4.overflow:auto

<style>
	div{
		width: 150px;
		height: 100px;
		background: YELLOW;
		overflow: auto;
	}
</style>
<body>
	<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
	</p>
    <div>
	这个属性定义溢出元素内容区的内容会如何处理。如果值为 auto，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
	</div>
</body>

内容超出给定宽高会显示滚动条在这里插入图片描述
内容没有超出给定的宽高则不显示滚动条

5.overflow:inherit

<style>
	div.on{
		overflow: scroll;
	}
	div.in{
		width: 150px;
		height: 100px;
		background: YELLOW;
		overflow: inherit;
	}
</style>
<body>
	<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
	</p>
	<div class='on'>
    	<div class='in'>
		如果值为inherit，规定应该从父元素继承 overflow 属性的值。
		</div>
	</div>
</body>

在这里插入图片描述

JavaScript语法：

Object.style.overflow = “visible/hidden/scroll/auto/inherit”;

不显示滚动条但有滚动效果的实现：

<style>
	div{
		width: 150px;
		height: 100px;
		background: YELLOW;
		overflow: scroll;
	}
	div::-webkit-scrollbar{
		display: none;
	}

</style>
<body>
    <div>
	这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
	</div>
</body>

鼠标放在显示的文本区域，能够实现文本的滚动效果
在这里插入图片描述

今天也是爱大大的一天吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS overflow属性

定义overflow属性规定当内容溢出元素框时该如何处理。属性可能的取值值描述visible默认值内容不会被修剪，会呈现在元素框之外hidden内容会被修剪，并且其余内容不可见scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容inherit规定应该从父元素继承overflow属性的值1.overflow:visible(默认值)<style> di
复制链接

扫一扫