CSS中overflow属性用法介绍

CSS属性有很多值得学习的地方,如果你掌握了CSS属性的变幻就会收到意想不到的效果,这里向大家简单描述一下CSS中overflow属性用法,overflow属性规定如何处理如何处理不符合元素框的内容。

我们提供的服务有:网站制作、成都网站建设、微信公众号开发、网站优化、网站认证、夷陵ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的夷陵网站制作公司

CSS中overflow属性用法介绍

overflow属性规定如何处理如何处理不符合元素框的内容。用法如下:Object.style.overflow=visible|hidden|scroll|auto。

参数介绍:

visible:内容不会被修剪,会呈现在元素框之外。

hidden:内容会被修剪,但是浏览器不会显示供查看内容的滚动条。

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

auto:由浏览器决定如何显示。如果需要,则显示滚动条。

本例使用overflow来显示溢出元素框的内容:

viewsourceprint?

 
 
 
  1. 01
  2. 02
  3. 03
  4. 04div{border:thinsolidgreen;width:100px;height:100px;}
  5. 05
  6. 06
  7. 07functionhideOverflow()
  8. 08{
  9. 09document.getElementById("div1").style.overflow="hidden";
  10. 10}
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16Thisissometext.Thisissometext.Thisissometext.
  17. 17Thisissometext.Thisissometext.Thisissometext.
  18. 18Thisissometext.Thisissometext.Thisissometext.
  19. 19
  • 20
  • 21
  • 22value="Hideoverflow"/>
  • 23
  • 24
  • 25
  •  相信大家都碰到过一种情况:没有给父级div指定高度。希望他通过子级div的高度变化而自动适应。看似很简单,但日常应用中往往对子级div有更多要求,比如多重子级div、子级div左(右)浮动等等。这时就会碰到一种比较郁闷的情况:父级div无法随着子级div的高度增加而增加,发生”脱层”的现象。这种时候就需要用到”overflow:hidden;”这个属性了。表面意思来看他的作用是隐藏div层,而当我们给父级div应用这个属性的时候会发现它神奇的变得自适应了。

    对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。

    overflow:hidden---这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分,但是页面布局不会乱。要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以。(在用ul和li做图片列表排列的时候,也可以用这个,这样避免一些大尺寸图搞乱布局,也可以解决浏览器窗口缩小时,li元素自动回行排列出错的问题)。用overflow:auto,还可以在页面里模仿出IFRAME的效果。

    本文标题:CSS中overflow属性用法介绍
    URL网址:http://www.gawzjz.com/qtweb2/news6/11306.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    网站制作知识

    同城分类信息