CSS之overflow属性用法

   CSS之overflow属性有四个值:visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x,它们很少被采用。让我们分别看一下这几个值,并讨论一写共同用法和技巧。

  Auto

  overflow的auto值很像scroll,它唯一解决的是在你不需要的时候也会出现滚动条的问题。

  Hidden

  默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。这对应付使用动态的内容,而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此,请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。 比如有的用户设置他们的浏览器的默认字体比你预期的要大些,你会将一些文字推到盒子的外面然后完全的隐藏之……

  Visible

  如果你不设置overflow属性,则默认的overflow属性值就是visible。所以一般而言,并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。这里需要记住的重要的事情是,尽管盒子外面的内容是可见的,内容并不会影响页面的工作流。一般来说,你至少不用为里面的内容为文字的盒子设置固定的高度,这样就不会遇到这种情况了。

  Scroll

  设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容,但是它将会提供一个滚动条在盒子内部滚动,从而可以查看剩下的内容。值得注意的是,使用scroll将会同时产生水平和垂直两个滚动条,就算内容只需要其中一个。

时间: 2024-11-05 16:34:15

CSS之overflow属性用法的相关文章

css white-space:nowrap属性用法

 css强制文字不换行,可给指定的容器增加white-space:nowrap即,下面把CSS示例写给大家,很简单 强制不换行,直接使用white-space:nowrap即可. CSS设置不转行:  overflow:hidden 隐藏  white-space:normal 默认  pre 换行和其他空白字符都将受到保护  nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 例:强制不换行 代码如下: div{ white-space:nowrap; }    

css white-space:nowrap属性用法(可以强制文字不换行输出)_CSS/HTML

强制不换行,直接使用white-space:nowrap即可.CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 复制代码 代码如下: div{white-space:nowrap;}

CSS Overflow属性详解(转)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容.所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属性值为 hidden 将隐藏其滚动条. overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflow的姐妹属性overflow-y 和overflow-x,它们很少被采用. Visible 如果你不设置overflow属性,则默认的o

利用CSS的Clip属性来创造多彩文字

css 原理 将二个相同而色彩不同的文字重合在一起,通过分别给其加 clip 属性,使上面和下面的文字被剪切位置不同,从而产生二种不同的色彩. clip : 摘自苏沈小雨CSS手册 clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换

使用CSS布局定位属性轻松实现优美站点布局

本文为大家介绍CSS布局定位属性,熟练的使用可以轻松实现优美站点布局,感兴趣的朋友可以参考下,希望对大家有所帮助   CSS定位属性: ◆bottom.left.right和top ◆position ◆clip ◆float ◆clear ◆overflow ◆z-index 该类属性设置元素在父级元素中的位置.在设置这类元素时,如果设置长度数值,均以px作为单位,在通过style对象读取属性时,返回带单位的字符串. 1.边偏移(bottom,left,right和top) 作用:设置元素距离

CSS的position属性在DIV层中的应用

定位的话,父DIV设置position:relative后,子DIV的position:absolute就会相对父DIV作绝对定位,接下来为大家介绍下CSS的position属性在DIV层中的应用   原来只明白position:relative是相对定位,position:absolute 是绝对定位: 经常看到图片轮播的下方有个半透明背景的文字描述.我现在要做这样一个效果,因为不是轮播,所以没去找插件,想自己写. 半透明背景可以设置属性background: rgba(0, 0, 0, 0.

jQuery的context属性用法实例_jquery

本文实例讲述了jQuery的context属性用法.分享给大家供大家参考.具体分析如下: 此属性可以返回传给jQuery()的原始DOM节点内容,即jQuery()方法的第二个参数值.如果jQuery()方法没有指定此参数,那么context指向当前文档(document).语法结构: 复制代码 代码如下: $("selector").context 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head>

jQuery对象的length属性用法实例_jquery

本文实例讲述了jQuery对象的length属性用法.分享给大家供大家参考.具体分析如下: 此属性返回匹配的jQuery对象集合中对象的数目. length属性与size()方法返回相同的值. 语法结构: 复制代码 代码如下: $("selector").length 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <m

CSS预处理器之SASS用法指南

CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于2007年,是最早也是最成熟的一款CSS预处理器语言,它可以使用变量.嵌套.混入.继承,运算,函数等功能,使得CSS的开发,变得简单清晰可维护,同时也大大节省了设计者的时间,提高了效率.Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式