overflow的用法（auto）

最新推荐文章于 2024-05-18 06:08:21 发布
最新推荐文章于 2024-05-18 06:08:21 发布
阅读量3.7k 收藏 10
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li_wen258/article/details/124780270
版权

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

overflow：auto的用法 

当一个父容器中的子元素加浮动，那么父容器的高度不会被撑开；当在父容器中加入overflow：auto，这时父容器就会适应子元素的高度

Li_wen258
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ie7中overflow:auto无效的解决方法
12-13
产生原因当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:auto属性就会失效。 解决办法解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。 代码bug重现 复制代码代码如下:<ul><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li></ul> 复制代码代码如下:ul{overflow:
标签增加CSS的overflow属性来清除浮动
01-19
这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。 方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。 ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left; width:80px; height:80px; background-color:#83B1DF; } .demo{ clear:both; border:1px solid #FF00FF; margin-bottom:5p
Android网页支付overflow功能JS
03-09
android 网页是不支持overflow:auto 属性的，即不支付超出父容器，让父容器出滚动条。这个JS就是完成这个功能的。在原生的HTML元素上进行了功能扩展，使容器在用户手指swipe时，进行滚动。用法：document.getElementById("div1").touchScroll();。经多个项目测试，代码效率优秀。
postcss-overflow-shorthand:在 CSS 中使用溢出速记
07-24
PostCSS 溢出速记 允许您按照规范在 CSS 中使用overflow速记。 html { overflow : hidden auto; } /* becomes */ html { overflow-x : hidden; overflow-y : auto; overflow : hidden auto; } 用法 将添加到您的项目中： npm install postcss postcss-overflow-shorthand --save-dev 将其用作插件： const postcss = require ( 'postcss' ) ; const postcssOverflowShorthand = require ( 'postcss-overflow-shorthand' ) ; postcss ( [ postcssOverflow
overflow:auto的用法详解
01-18
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>overflow:auto的用法</title> <meta name=viewport content=
overflow：auto的用法和实现弹性盒横向滚动
YY的博客
09-29 1万+
overflow：auto的用法、实现弹性盒横向滚动
CSS 属性 ----- overflow：auto 的使用
qq_43477721的博客
06-14 8634
overflow 属性规定当内容溢出元素框时发生的事情。定义当一个元素的内容太大而无法适应 块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。 MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 <!DOCTYPE html> <html lang="en"> <head> .
overflow
pscool的博客
05-12 647
overflow 可选值：visible | hidden | scroll | auto 默认值：visible 复合属性。检索或设置对象处理溢出内容的方式。overflow的效果等同于overflow-x + overflow-y。 visible： 对溢出内容不做处理，内容可能会超出容器。 hidden： 隐藏溢出容器的内容且不出现滚动条。 scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。 auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条
CSS属性overflow详解（auto hidden）
qq_44537625的博客
09-02 6138
overflow用在什么地方 overflow 属性规定当内容溢出元素框时发生的事情。 overflow有哪些属性值？ 1. visible 默认值。内容不会被修剪，会呈现在元素框之外。 2. hidden 内容会被修剪，并且其余内容是不可见的。 3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 ...
overflow：scroll和auto
时光留不住，毕竟东流去
04-09 2815
overflow: scroll将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条始终可见，但被禁用。 overflow: auto 非常相似，但滚动条仅在内容溢出时出现 所占空间位置不同 overflow: scroll情况下，内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。 overflow: scroll 而overflow: auto情况...
overflow:hidden line-height clearfix:after使用方法介绍
01-19
1.overflow:hidden的作用是隐藏溢出比如： 复制代码代码如下: <div xss=removed id=1><div id=2></div><div> 当ID=2的这个DIV高度设定的宽度超过了300px，那么超出的部分将自动被隐藏 2.line-height指的是在DIV中的元素上下居中 比如用在<li>里，则可以将line-height的高度和height的值相等，（height:30px; line-height:30px;）这样可以让文字在<li>内相对于30px垂直居中。比如用在<p>内，像这样成段落的，如果不加lin
详解overflow-scrolling解决滚动卡顿问题
01-18
如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。 解决方法 以下代码可解决这种卡顿的问题：-webkit-overflow-...
css小工具——文字换行之word-wrap: break-word、鼠标小手-cursor:pointer、滚动条-overflow-y:auto、超出…或超出省略号-text-overflow
weixin_44867717的博客
03-02 3156
css小工具——文字换行之word-wrap: break-word、鼠标小手-cursor:pointer、滚动条-overflow-y:auto、超出…或超出省略号-text-overflow: ellipsis 1、文字换行 元素明明设置了宽度,但是竟然溢出了,添加上以下代码让其自动换行 .wg-width{ display:inline-block; width:320px; line-height: 18px; word-wrap: break-word //自动换行 } 2、
解决父级边框塌陷的方法
Xie_xie_ni_1的博客
09-06 4850
1.添加空标签 2.使用overfiow属性 3.设置父级元素的高度 4.父级添加伪类after .clear:after{ conteant:''; display:block; clear:both; }
overflow：auto的用法
热门推荐
boysky0015的博客
05-31 4万+
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下：<!DOCTYPE html> <html> <head>
HTML中overflow的作用
weixin_43816721的博客
11-27 1万+
Overflow属性： 主要用于设置盒子的属性，规定当内容溢出元素框时发生的事情，这个属性主要有这个设置值 1.overflow：visible  默认值，内容不会被修剪，会呈现在元素框之外。 2.overflow：hidden 内容会被修剪，并且其余内容是不可见的。 3.overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。 4.overflow:...
解析css中的overflow属性
m0_68845148的博客
11-10 3704
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
overflow:scroll与overflow:auto的区别
hellow_tommer的博客
01-14 2992
首先我们需要了解到如何滑动内容 这就用到了一个属性：overflow overflow: scroll;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 overflow: auto;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 他们都可以加滚动条进行滑动，如果作用相同，为什么会出现两个？ 那肯定是因为他们有所不同，先让我们去看一看，他们的效果是什么样子的： 第一个是使用scroll的 第二个是使用auto的 然后我们再看下一张进行对比
css sprites如何使用
最新发布
codedadi的博客
05-18 390
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
overflow:auto兼容性写法
09-24
### 回答1： 以下是兼容性比较好的写法： ``` div { overflow: auto; overflow-x: auto; overflow-y: auto; /* IE6/7 */ _overflow-x: auto; _overflow-y: auto; /* Firefox */ overflow: -moz-scrollbars-horizontal -moz-scrollbars-vertical; overflow-y: scroll; /* Firefox 4+ */ } ``` 其中，`_overflow-x` 和 `_overflow-y` 是 IE6/7 下的 hack 写法，用于覆盖这两个浏览器的 bug。`overflow: -moz-scrollbars-horizontal -moz-scrollbars-vertical;` 可以让 Firefox 显示滚动条。最后一行 `overflow-y: scroll;` 则是针对 Firefox 4+ 的写法。 ### 回答2： overflow:auto是CSS属性中用于处理元素溢出内容时的一种方案。它的作用是当元素内部内容超出容器大小时，自动显示滚动条以便查看全部内容。然而，不同浏览器对于overflow:auto的兼容性存在差异。 为了解决这个兼容性问题，可以使用以下方法： 1. 使用浏览器前缀：在CSS中，可以为overflow属性添加浏览器前缀来实现兼容性。例如，-webkit-表示Chrome和Safari，-moz-表示Firefox，-o-表示Opera等。 -webkit-overflow-scrolling: touch; /* for iOS Safari */ -ms-overflow-style: -ms-autohiding-scrollbar; /* for Internet Explorer */ 2. 使用JavaScript：如果需要更加精确地控制元素的滚动行为，可以使用JavaScript来实现。通过监听滚动事件，动态修改元素的overflow属性，来实现不同浏览器的兼容性。 var element = document.getElementById("myElement"); if (element.scrollHeight > element.clientHeight) { element.style.overflow = "auto"; } 3. 使用特殊样式：对于一些特殊情况，可以使用一些特殊的样式来实现兼容性。例如，当在iOS设备上，可以使用-webkit-overflow-scrolling: touch来实现更流畅的滚动效果。 以上就是overflow:auto的兼容性写法的一些方法。根据具体的需求和浏览器的兼容性要求，选择合适的方法来实现元素内容的溢出处理。 ### 回答3： 在CSS中，overflow:auto用于定义一个元素在内容溢出时是否显示滚动条。在一些旧版本的浏览器上，可能不支持这个属性或会有一些兼容性问题。为了解决这个问题，可以使用以下兼容性写法： 1. 使用包含块：可以将需要设置overflow:auto的元素放置在一个包含块内，并设置该包含块的overflow属性为auto。这样可以确保在不支持overflow:auto的浏览器上，也能正常显示滚动条。 ```css .container { overflow: auto; } ``` 2. 使用overflow-x和overflow-y：有些旧版本的浏览器只支持overflow-x和overflow-y属性，可以将需要设置overflow:auto的元素分别设置这两个属性为auto，以确保在这些浏览器上也能正常显示滚动条。 ```css .element { overflow-x: auto; overflow-y: auto; } ``` 总的来说，以上是常用的两种兼容性写法，可以根据具体情况选择适合的方式来解决overflow:auto在旧版浏览器上的兼容性问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值