`
arne3166
  • 浏览: 129734 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

overflow 的作用

    博客分类:
  • Css
阅读更多

我一直不明白overflow是干嘛用的,今天我非得弄明白是怎么回事,

 

 

看了别人的问章,根据描述记下了,以后不忘,这里笔记下。

 

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

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

设置 overflow 属性:

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

可能的值

 

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

 

 

overflow-x / overflow-y 是扩展属性,并不是所有的浏览器都支持,不知道为什么这个不作为标准。如果就是要针对x或者针对y来进行overflow设置呢,那该怎么办。

分享到:
评论

相关推荐

    CSS中overflow-y: visible;不起作用的原因分析及解决方法

    小编最近遇到这样的需求,移动端的h5页面,要求有一排可选择的卡片, 超出容器部分可以左右滑动,同时每张卡片...接下来通过本文给大家介绍CSS中overflow-y: visible;不起作用的原因分析及解决方法,需要的朋友参考下吧

    页面内容overflow代码

    在响应式网页设计中,`overflow`属性也有着重要作用。它可以用来确保内容在不同屏幕尺寸下仍然可读和可操作。例如,对于移动设备,可能希望内容始终可见,即使这意味着显示滚动条。 5. **overflow-x 和 overflow-y...

    全面阐述overflowhidden属性

    ### 全面阐述 `overflow...通过本文的介绍,我们了解到 `overflow: hidden` 在网页布局中的重要作用,不仅能够帮助我们解决许多实际问题,还能让页面更加美观、规范。掌握好这一属性,对于前端开发者来说是非常重要的。

    overflow属性的使用小例子

    总的来说,`overflow`属性是CSS中一个强大且实用的工具,它帮助开发者管理和控制元素内容的显示,特别是在创建响应式、自适应和可滚动的网页布局时,`overflow`的作用不可或缺。理解和熟练运用`overflow`,将对提升...

    解决页面使用overflow: scroll在iOS上滑动卡顿的问题1

    总的来说,这个知识点涉及到了iOS设备上的Web开发,特别是CSS的`-webkit-overflow-scrolling`属性在优化滚动性能方面的作用,以及其可能带来的内存消耗问题。开发者在面对类似问题时,可以考虑使用这个属性来提升...

    css中position:relative和overflow:hidden的问题

    总之,`position:relative`和`overflow:hidden`是CSS布局中的两个关键工具,理解它们的工作原理以及如何相互作用,对于提高网页设计和开发的能力至关重要。在实际项目中,我们需要根据具体需求灵活运用这两个属性,...

    详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    而在`.zb`类中,`zoom:1`在IE浏览器中起到了类似的作用。 总结来说,`zoom`和`overflow:auto`是处理浮动元素布局问题的重要工具。在编写兼容性良好的CSS代码时,为了确保在各种浏览器中都能正确清除浮动,通常需要...

    浅析CSS3 用text-overflow解决文字排版问题

    text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ellipse: 用… 三个点来表示溢出的文字 (常用) string:可...

    CSS属性探秘系列(二):overflow及相关属性text-overflow

    总结来说,`overflow`、`overflow-x`、`overflow-y`和`text-overflow`是CSS中处理元素内容溢出的关键属性,它们帮助开发者控制元素内部内容的显示方式,特别是在响应式设计和布局优化中起着重要作用。理解并熟练运用...

    CSS属性text-overflow的使用问题

    `强制文本在同一行内显示,不允许换行,这使得文本保持在一个单行区域内,这样当设置了固定宽度并且内容超出了这个宽度时,`text-overflow`就能发挥作用。 `width`属性则定义了元素的宽度,它是决定文本何时开始被...

    溢出文本text-overflow的使用问题分析及解决

    需要注意的是,要想这两个属性起真正的作用,需要配合overflow:hidden;white-space:nowrap;使用。 overflow:hidden;代表着超出文本的部分不显示 white-space:nowrap;代表强制文本在一行显示。 我写的例子代码: ...

    IE8 css overflow:hidden不起作用

    IE8浏览器中,CSS属性`overflow:hidden`无法正常工作的问题,实际上反映出了不同版本浏览器对CSS标准支持程度的差异。`overflow`属性通常用于控制元素内容溢出时的显示方式。在大多数现代浏览器中,`overflow:hidden...

    Overflow scroll-crx插件

    总结来说,Overflow scroll-crx是一款增强Chrome浏览器用户体验的实用工具,它解决了"overflow: hidden"所带来的不便,使得用户能够全面查看网页内容,无论是开发调试还是日常浏览,都能发挥积极作用。通过这个插件...

    修正IE下使用CSS属性overflow的bug

    在IE6中,`overflow:auto`不起作用,没有滚动条出现,导致超出容器的内容无法查看。为了解决这个问题,可以给`pre`元素的包含块(containing block)设置宽度,如`width: 90%`。这样做使得IE6的滚动条出现,但同时也...

    li样式不显示使用overflow:hidden导致Li前面点、圈等样式不见

    实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点、圈等样式。 解决办法:在ul或li内加入样式:list-style-position: inside; 即可。...

    select选项过长无法显示设置overflow:hidden在IE9中不起作用

    特别是使用老旧的浏览器版本如Internet Explorer 9时,我们可能会发现CSS属性“overflow:hidden”无法正常工作,以隐藏超出指定范围的内容。这是一个常见的问题,需要通过特定的解决方案来处理。 首先,我们来解释...

    css之使table也能overflow:hidden

    在Web前端开发中,我们常常会遇到需要对表格(table)中的内容进行溢出隐藏的需求,即超出表格单元格(td)的文本部分不显示,这时就需要使用CSS的overflow属性。然而,直接在td元素上应用overflow:hidden并不如在...

    CSS--overflow:hidden在项目实例中使用心得分享

    通过上述几个例子,我们可以看出,"overflow:hidden"属性在不同的场景下有不同的作用,它不仅可以用来清除浮动和阻止边距折叠,还能在特定浏览器环境下处理布局问题,以及在创建两栏布局时用于隐藏溢出内容。...

Global site tag (gtag.js) - Google Analytics