css overflow属性及使用方法（场景）

最新推荐文章于 2024-05-04 04:33:35 发布
最新推荐文章于 2024-05-04 04:33:35 发布
阅读量1.8w 收藏 82
点赞数 14
分类专栏： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44058725/article/details/103344635
版权
html 同时被 2 个专栏收录
28 篇文章 1 订阅
订阅专栏
css
20 篇文章 2 订阅
订阅专栏

overflow这个属性还是挺实用的比如，一个div展示文字，想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll;

1.overflow的属性

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

 

浏览器支持

所有主流浏览器都支持 overflow 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

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

默认值：visible
继承性：no
版本：CSS2
JavaScript 语法：object.style.overflow="scroll"

2.overflow使用及效果 

1.visible(默认值)

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:visible;
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

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

</html>

 

 

visible就是不做任何修改（不过多解释）

2.hidden(超出部分被隐藏)

hidden就是设置了宽高，超出部分会被隐藏。

3. scroll(滚动)

scroll会给其容器加上一个滚动条(x,y都加上)。如果不想显示x轴可用下列方法控制。

verflow-x: hidden; 不显示横向的滚动条 

overflow-y: hidden; 不显示纵向的滚动条

overflow-x: scroll; 显示横向的滚动条

overflow-y: scroll; 显示纵向滚动条 

 3.auto(自动)

这个很长见一般都用这个（会根据文字长度自动来动态的来显示隐藏）；

4.inherit

规定应该从父元素继承 overflow 属性的值。如果父元素有overflow属性就会继承父元素的overflow的属性。

3.修改滚动条样式

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  • ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
  • ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

具体设置滚动条样式可参考https://blog.csdn.net/cysear/article/details/70264148

点击这里去实践一下可看效果代码https://www.w3school.com.cn/tiy/t.asp?f=csse_overflow

崽崽的谷雨
关注
  • 14
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css溢出属性：overflow属性介绍
YY的博客
09-08 1万+
text-overflow、overflow：hidden、overflow：scroll、overflow：auto
解析css中的overflow属性
m0_68845148的博客
11-10 6272
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
Stack Overflow 最火的一段代码竟然有 Bug，还敢随便 Copy 吗？
最新发布
dgayuiafahf的博客
05-04 880
无论是哪家公司，都很重视Spring框架技术，重视基础，所以千万别小看任何知识。面试是一个双向选择的过程，不要抱着畏惧的心态去面试，不利于自己的发挥。同时看中的应该不止薪资，还要看你是不是真的喜欢这家公司，好了希望这篇文章对大家有帮助！《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门，即可获取！什么情况下会用到负的字节数，但由于Java并没有无符号的long，所以最好处理复数。现在，-10,000会产生-10000 B。
CSS overflow 属性(琐碎知识点整理)
黑木令之佛性
07-04 1万+
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 前端CSS 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。 好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 一. 定义和用法: 1. overflow 属性规定当内容溢出元素框时发生的事情 。 2. 这个属性定义溢出元素内容区的内容会如何处理 。 如果值为
CSS中overflow的多种用法
Lxydzh的博客
08-04 1586
CSS中overflow的用法： 1.基本用法：超出父元素部分如何显示？——— overflow:hidden(隐藏） scroll(以滚动条形式显示) 2.延伸用法：当article作为父元素且不设置高度情况下，其高度由子元素内容决定，但当为子元素设 置浮动之后，article“无高度消失”。可设置overflow:hidden解决。 3.延伸用法：解决父子级外边距合并问题。给父元素设置overflow：hidden属性（注：sticky中不可使用）。 ...
CSS系列之详解overflow
老__L的博客
02-01 8869
本文主要介绍CSS的overflow、overflow-x、overflow-y属性。详解overflow
CSS3：overflow属性详解
热门推荐
小谭鸡米花的博客
10-30 2万+
1.Overflow overflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden， 就可以把超出容器的部分隐藏起来； 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto； overflow：auto 属性如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条， 滚动条也可以单独设置，例如overflow-x：hidden；overflow-y：auto；这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候，两个属性都需设置属性值。
CSS属性探秘系列(二)：overflow及相关属性text-overflow
09-25
在本文中，我们将深入探讨`overflow`及其相关的属性`overflow-x`、`overflow-y`和`text-overflow`，理解它们的用法和应用场景。 首先，我们来看`overflow`属性。它的主要功能是定义当内容超出元素的边界时，浏览器...
修正IE下使用CSS属性overflow的bug
10-30
其中，`overflow`属性是一个常用的CSS属性，用于处理元素内容溢出其容器时的行为。然而，在不同的浏览器中，特别是Internet Explorer（IE）浏览器，`overflow`属性的实现存在一些兼容性问题。本篇文章将详细介绍IE...
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
在CSS布局中，`overflow:hidden` 是一个非常重要的属性，它可以解决多种布局问题，包括隐藏溢出的内容、清除浮动以及防止margin坍塌。本文将详细解释这三个方面。 1. **隐藏溢出** 当元素的内容超出了其指定的...
CSS clip属性全知道
09-25
虽然在现代布局方法（如Flexbox和Grid）中，其应用场景较为有限，但在特定场景下，`clip`属性仍能发挥独特的作用。 **基本概念** `clip`属性允许开发者指定一个矩形区域，只有在这个区域内，元素的内容才会显示，...
css中属性值继承全面总结（推荐）
09-24
在CSS中，属性值继承是一项重要的机制，允许子元素从其父元素继承特定的样式属性。这大大减少了在样式表中重复定义相同属性的需求。然而，并非所有CSS属性都能被继承，理解哪些属性可以继承以及如何操作继承是优化...
DIV滚动条颜色
weixin_30586085的博客
03-26 220
DIV滚动条颜色可由以下属性设定scrollbar-3d-light-color 设置或检索滚动条亮边框颜色 crollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色 scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色...
CSS 浅探flex布局中使用的overflow ，及width/height=0
japlus的博客
11-27 9158
w3school定义是： overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 对于overflow:auto的初级理解是，设置父元素height/width，若子元素溢出，则自动显示纵向/横向滚动条。 .........
11、关于CSS样式中“颜色”的概念介绍及 Overflow（overflow属性规定当内容溢出元素框时发生的事情）
Learn All的博客
12-23 621
2.13 关于CSS样式中“颜色”的概念介绍   光的颜色很多，但是所有的光线都是由三种基本的光线组成红（red）、绿（green）、蓝（blue），网站的图片模式都是RGB模式；网页图片中任何一种颜色都是由这三个颜色构成。（印刷用的CMYK模式）。每个颜色的色值范围是0-255，如果用十进制来表示颜色，肯定会出现歧义。在实际表示颜色的值用16进制来表示（00-FF）。 十六进制和十进制的转换： 十进制有十个数，最大数是9；十六进制有十六个数：0-9、 A 、B 、C 、D、 E 、F （FF）16=（2
overflow滚动条样式调整
qq_28575855的博客
08-29 1210
overflow滚动条样式调整Body {}{ scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/ scrollbar-face-color: #333; /**//*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜 色*/ scrollbar-highlight-color: #
CSS中的 overflow 属性
CyberPlayer的博客
02-13 1986
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。 overflow 属性可设置以下值： visible- 默认。溢出没有被剪裁。内容在元素框外渲染 hidden- 溢出被剪裁，其余内容将不可见 scroll- 溢出被剪裁，同时添加滚动条以查看其余内容 auto- 与scroll类似，但仅在必要时添加滚动条 注意：overflow 属性仅适用于具有指定高度的块元素。 ...
overflow在CSS中的意思和用法
技术学习
04-14 1593
overflow从字面意义上来讲就是溢出的意思唄，换句话说，你有个层，但是里面的内容，图片或者文字要比层大，overflow就是针对这种情况进行处理的。     包含4个属性值，visible,hidden,auto,scroll     visible就是超出的内容仍然正常被显示出来。     hidden就是超出的内容被隐藏。     auto是默认值，根据内容剪切或者加滚动条。     sc
overflow
weixin_33739646的博客
11-07 285
[TOC]想要出现滚动条有两个条件：固定的容器大小(固定宽度、固定高度、固定宽高度)和设置overflow属性。 overflow 这个属性定义溢出元素内容区的内容会如何处理。 属性值 visibale：默认值。内容不会被修剪，会呈现在元素框之外。 hidden：内容会被修剪，并且其余内容是不可见的。 scroll：内容会被修剪，但是浏...
overflow:scroll 移动端失效
07-20
### 回答1： overflow:scroll 是一个CSS属性，用来设置一个元素在内容超出其容器尺寸时是否显示滚动条。在移动端中，overflow:scroll 有时可能失效的原因有以下几个： 1. 使用的元素不支持滚动：有些元素，比如 `<div>` 或 `<span>`，默认是不支持滚动的，只有设置了特定的CSS属性后才能实现滚动效果。因此，如果在一个不支持滚动的元素上使用 overflow:scroll，是不会有效果的。 2. 缺乏足够的内容：当容器内的内容没有超出容器的尺寸时，即使设置了 overflow:scroll，也不会显示滚动条。因此，检查一下容器内的内容是否足够多，以确保滚动条的显示。 3. 容器尺寸限制：有时，父容器对子容器的尺寸进行了限制，例如设置了固定的高度或宽度，并且没有提供足够的空间来显示滚动条。在这种情况下，即使设置了 overflow:scroll，滚动条依然不会显示。 解决这些问题的方法可能是： 1. 使用支持滚动的元素：如果需要实现滚动效果，可以考虑使用 `<ul>` 或 `<div>` 等支持滚动的元素，并在其上应用 overflow:scroll。 2. 提供足够的内容：确保容器内的内容超出容器的尺寸，以触发滚动条的显示。 3. 调整容器尺寸限制：如果父容器对子容器的尺寸进行了限制，可以尝试调整父容器的大小或使用其他布局方式，以确保滚动条可以正常显示。 除此之外，还有其他可能的原因导致 overflow:scroll 失效，如浏览器或设备的兼容性问题。在实际应用中，我们可以通过调试工具或其他开发者工具来进一步排查和解决该问题。 ### 回答2： overflow:scroll 在移动端失效的原因可能有以下几点： 1. 移动设备的触摸屏幕和滚动机制不同于传统的鼠标滚轮操作，因此浏览器默认禁用了 overflow:scroll 的功能。在移动设备上，用户可以通过手指滑动屏幕的方式来进行页面的滚动。 2. 移动设备的屏幕尺寸较小，因此浏览器在移动端对页面进行了优化，自动将 overflow:scroll 的内容进行了隐藏，并不会出现滚动条。这是为了保证页面在移动设备上可以正常显示，并减少页面占用的空间。 3. 在某些特定的移动浏览器中，可能存在一些兼容性问题，导致 overflow:scroll 失效。这可能是由于浏览器对 CSS 的支持程度不同或者存在一些 bug。 针对以上情况，我们可以通过以下方法来解决移动端下 overflow:scroll 失效的问题： 1. 使用移动端特有的滚动区域组件，例如提供了滚动功能的第三方组件（如 iScroll、better-scroll 等）来替代原生的 overflow:scroll。 2. 使用 CSS 属性 -webkit-overflow-scrolling: touch; 来启用移动设备的滚动效果。这个属性可以告诉浏览器在滚动区域内使用硬件加速的方式进行滚动，提升性能和流畅度。 3. 对于需要在移动端实现滚动效果的特定场景，可以考虑使用 position:fixed; 来固定页面的某个区域，并结合 touch 事件来实现自定义的滚动效果。 总结来说，overflow:scroll 在移动端失效主要是因为浏览器默认禁用了该功能或者移动设备的屏幕尺寸较小无法正常显示。我们可以借助特定的滚动组件或者 CSS 属性来实现移动端的滚动效果。 ### 回答3： overflow:scroll 是 CSS 属性，用于控制元素溢出内容时的滚动行为。在移动端中，有时会遇到 overflow:scroll 失效的情况。 造成 overflow:scroll 失效的可能原因有以下几种： 1. 元素没有定义固定的高度或宽度：在移动端，由于屏幕大小不一致，如果元素没有定义明确的高度或宽度，浏览器无法确定内容何时溢出，因此 overflow:scroll 属性可能无效。 解决方法：确保元素设置了固定的高度或宽度，如通过设置 height 或者 width 属性来约束元素的尺寸。这样浏览器就能根据内容是否溢出来决定是否显示滚动条。 2. 浏览器不支持滚动：在某些移动端浏览器中，特别是一些老旧的浏览器，可能不支持 overflow:scroll 属性。 解决方法：可以使用 Javascript 或者专门的滚动插件来实现滚动效果，或者尝试使用其他浏览器测试是否支持滚动属性。 3. 元素的位置固定或绝对定位：如果元素的定位方式为 fixed 或者 absolute，overflow:scroll 属性可能会失效。 解决方法：将元素的定位方式修改为 relative 或 static，或者在父级元素上设置 overflow 属性。 总结来说，在移动端中，如果遇到 overflow:scroll 失效的问题，需要确保元素定义了固定的高度或者宽度，浏览器支持滚动属性，以及元素的定位方式是否符合要求。如果仍然无法解决问题，可以尝试使用其他解决方案来实现滚动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

崽崽的谷雨

漫漫前端路，摸爬滚打

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值