overflow的四个属性（visible、hidden、scroll、auto）

已于 2023-05-29 19:50:11 修改
阅读量1.2k 收藏
点赞数 9
文章标签： css
于 2022-07-21 16:05:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66570642/article/details/125914522
版权
本文深入探讨了CSS中`overflow`属性的使用，包括`visible`、`hidden`、`scroll`和`auto`四个值。`visible`允许内容超出元素框，`hidden`修剪内容并使其不可见，`scroll`添加滚动条以查看全部内容，而`auto`则根据需要显示滚动条。理解这些设置对于优化网页布局和用户体验至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

visible  默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto     如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承overflow属性的值。

overflow-x: auto 属性
菜鸟黑一枚
12-25 8199
当文本长度超出之后  overflow-x: auto 属性自动产生横向滚动条   <template> <div class="content-container"> <title-bar titleName="案例详情"> <template slot="tool"> <
关于overflow三个属性：auto、visible、hidden的简单应用
qq_46106080的博客
08-10 1116
关于overflow三个属性：auto、visible、hidden的简单应用 overflow:visible visible是默认属性 下面是两列布局右边自适应代码 给没有设置宽高的div标签设置visible属性之后 标签内容会出现自适应 在屏幕宽度较小时出现外围 <title>两列布局</title> <style> /* 清楚内外边距 */ * { margin: 0px;
CSS容易被人遗忘的overflow : visible
赤道与北极
10-10 3163
昨天做某个功能时需要textbox根据内容自动伸缩大小；后经同事推荐使用overflow : visible，还真是不错啊。overflow : visible不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 。当然别忘记添加MaxLength；否则你的页面将会被撑爆哦。 
CSS: overflow ----visible 和 auto 区别
weixin_33882452的博客
01-04 653
2019独角兽企业重金招聘Python工程师标准>>> ...
overflow:hidden / scroll不会隐藏所有子元素
徐同保的专栏
11-02 1701
拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式； 内部溢出的元素是通过position:absolute绝对定位，并且该定位元素的包含块是设置overflow:hidden元素的父级元素 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
01-19
大家可以发现，上网站上查询之后会得到overflow-x和overflow-y的一大堆属性值，但很多网站并没有详细说明各属性值的效果，我们今天细说一下。 各属性值如下： visible：默认值，不裁剪内容，可能会显示在内容框...
overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解
最新发布
u013179804的博客
04-21 8394
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。
CSS属性探秘系列(二)：overflow及相关属性text-overflow
09-25
在CSS世界中，`overflow`属性是一个至关重要的样式规则，用于控制内容在元素框内溢出的行为。在本文中，我们将深入探讨`overflow`及其相关的属性`overflow-x`、`overflow-y`和`text-overflow`，理解它们的用法和应用...
css之使table也能overflow:hidden
10-30
其常见值包括visible（默认值，溢出内容会显示在元素框之外）、hidden（溢出的内容会被裁剪，并且不可见）、scroll（溢出内容会导致出现滚动条，无论是否真的需要滚动）、auto（溢出内容会导致滚动条，但只在需要时...
overflow: scroll隐藏滚动条的问题
热门推荐
sinat_25017107的博客
07-15 5万+
最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题。对于隐藏滚动条，我们最常用的方法首先是：1、使用以下CSS可以隐藏滚动条：.container::-webkit-scrollbar {display:none}但是要兼容其他浏览器的话这个就不太好用了，这个适用于Chrome2、为了兼容其他的浏览器，可以用这样的方法：在滚动区域外再套一层div，给这层div设置overflow:...
overflow:auto与scroll区别
weixin_44941889的博客
11-09 3624
overflow: auto与scroll在内容超出时浏览器均会显示滚动条 但在元素没有超出时，auto会隐藏滚动条，scroll依旧显示滚动条，但是禁用该滚动条
overflow：scroll和auto
时光留不住，毕竟东流去
04-09 3143
overflow: scroll将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条始终可见，但被禁用。 overflow: auto 非常相似，但滚动条仅在内容溢出时出现 所占空间位置不同 overflow: scroll情况下，内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。 overflow: scroll 而overflow: auto情况...
overflow: auto与overflow:hidden区别
我心坚持
05-04 1307
overflow: auto;将看不见被隐藏的，以滚动条的形式进行展示。 overflow:hidden;直接将多余的隐藏，想看也看不了。
overflow:scroll与overflow:auto的区别
hellow_tommer的博客
01-14 3710
首先我们需要了解到如何滑动内容 这就用到了一个属性：overflow overflow: scroll;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 overflow: auto;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 他们都可以加滚动条进行滑动，如果作用相同，为什么会出现两个？ 那肯定是因为他们有所不同，先让我们去看一看，他们的效果是什么样子的： 第一个是使用scroll的 第二个是使用auto的 然后我们再看下一张进行对比
overflow属性详解
大雾起了清晨
11-30 7393
overflow属性详解
overflow: hidden scroll 在移动端失效问题
qq_33582129的博客
09-13 1万+
.drag_view_div{ width: 100%; height: 100%; background: orangered; overflow-y: scroll; overflow: hidden scroll; position: relative; } 添加 overflow-y: scroll 之后就一切正常了  ...
dw中，在层属性设置中，visible, hidden, scroll, auto, .的含义
kb1299的博客
12-07 4603
Visible(显示)：选择该选项，当层内容超出层的范围时，可自动增加层尺寸。 　　hidden(隐藏): 选择该选项，，当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。 　　scroll(滚动条): 选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。 　　auto(自动): 选择该选项，，当层内容超出层的范围时，自动增加滚动条(默认) 可以使用jquery或者javas
透明滤镜导致overflow:visible变为hidden
逆退相干
07-30 263
如下: [code="java"] *{ margin:0px; padding:0px; } #d01{ /*IE有滤镜的时候这里会被当作hidden,导致显示区域被剪切,而其它浏览器没有这种情况*/ /*另外补充一点,在IE下,不触发layout,透明滤镜不会生效*/ overflow:visible; positi...
overflow
Luffy_ying的博客
01-01 1442
一、overflow基本属性 （1）visible默认 超出部分表现出来 （2）hidden 超出部分隐藏 （3）scroll 滚动条 （4）auto  哪侧溢出 那边出现滚动条 （5）inherit 二、作用的前提 （1）非display:inline （2）对应方位的尺寸限制 width/height/max-width/max-height/absolute拉伸 三、ove
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

宝子向前冲

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值