标签:style http io ar color 使用 sp java on
overflow 属性规定如何处理如何处理不符合元素框的内容。用法如下:Object.style.overflow=visible|hidden|scroll|auto。
参数介绍:
本例使用 overflow 来显示溢出元素框的内容:
01 |
< html > |
02 |
< head > |
03 |
< style type = "text/css" > |
04 |
div { border:thin solid green; width:100px; height:100px; } |
05 |
</ style > |
06 |
< script type = "text/javascript" > |
07 |
function hideOverflow() |
08 |
{ |
09 |
document.getElementById("div1").style.overflow="hidden"; |
10 |
} |
11 |
</ script > |
12 |
</ head > |
13 |
< body > |
14 |
< div id = "div1" > |
15 |
This is some text. This is some text. This is some text. |
16 |
This is some text. This is some text. This is some text. |
17 |
This is some text. This is some text. This is some text. |
18 |
</ div > |
19 |
< br /> |
20 |
< input type = "button" onclick = "hideOverflow()" |
21 |
value = "Hide overflow" /> |
22 |
</ body > |
23 |
</ html > |
相信大家都碰到过一种情况:没有给父级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的效果。
标签:style http io ar color 使用 sp java on
原文地址:http://www.cnblogs.com/xiaoyang002/p/4138041.html