CSS中overflow属性用法介绍

开发 前端
本节和大家一起学习一下CSS中overflow属性用法,overflow属性规定如何处理如何处理不符合元素框的内容,它主要有四个参数,分别是visible,hidden,scroll和auto。

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

CSS中overflow属性用法介绍

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

参数介绍:

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

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

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

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

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

viewsourceprint?

  1. 01<html> 
  2.  
  3. 02<head> 
  4.  
  5. 03<styletypestyletype="text/css"> 
  6.  
  7. 04div{border:thinsolidgreen;width:100px;height:100px;}  
  8.  
  9. 05</style> 
  10.  
  11. 06<scripttypescripttype="text/javascript"> 
  12.  
  13. 07functionhideOverflow()  
  14.  
  15. 08{  
  16.  
  17. 09document.getElementById("div1").style.overflow="hidden";  
  18.  
  19. 10}  
  20.  
  21. 11</script> 
  22.  
  23. 12</head> 
  24.  
  25. 13<body> 
  26.  
  27. 14  
  28.  
  29. 15<dividdivid="div1"> 
  30.  
  31. 16Thisissometext.Thisissometext.Thisissometext.  
  32.  
  33. 17Thisissometext.Thisissometext.Thisissometext.  
  34.  
  35. 18Thisissometext.Thisissometext.Thisissometext.  
  36.  
  37. 19</div> 
  38.  
  39. 20<br/> 
  40.  
  41. 21<inputtypeinputtype="button"onclick="hideOverflow()"  
  42.  
  43. 22value="Hideoverflow"/> 
  44.  
  45. 23  
  46.  
  47. 24</body> 
  48.  
  49. 25</html> 
  50.  

 相信大家都碰到过一种情况:没有给父级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的效果。
 

【编辑推荐】

  1. link与@import在外部引用CSS中的区别
  2. 技术分享 如何实现CSS横向导航
  3. DIV CSS表单布局五个小技巧使用秘笈
  4. 完美实现丰富的CSS文字效果
  5. 鼠标经过时改变DIV背景颜色的三种途径

 

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-08-31 13:14:41

CSSoverflow

2010-08-25 15:34:48

CSSoverflow

2010-09-07 16:46:59

CSSexpression

2010-08-24 13:14:36

CSSmargin

2010-09-07 14:40:10

title属性Alt属性CSS

2010-08-24 16:35:19

paddingCSS

2010-08-23 09:42:50

CSSPosition

2010-09-01 11:21:18

CSSpositionfloat

2010-09-09 15:08:40

CSSfloatclear

2010-09-03 10:43:05

CSSmargin

2010-09-16 10:10:50

CSSdisplay

2010-08-23 13:40:46

CSSpadding-bot

2010-08-27 11:10:30

CSSmargin

2010-08-23 11:16:25

padding-lef

2010-08-23 09:11:18

padding-bot

2010-08-23 09:16:21

CSSpadding-bot

2010-08-25 08:47:16

CSScellspacingcellpadding

2010-08-20 16:29:01

padding-lef

2010-09-08 11:06:49

CSSpaddingmargin

2010-08-25 08:57:33

marginpadding
点赞
收藏

51CTO技术栈公众号