小白教程
所有教程
关于
Search
108.162.216.60
108.162.216.60
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS Overflow”的源代码
本页内容
上一节:
CSS_Position(定位)
下一节:
CSS_Float(浮动)
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS Overflow}}[[Category:CSS 教程|21]] = CSS 布局 - Overflow = CSS overflow 属性用于控制内容溢出元素框时显示的方式。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: scroll; border: 1px solid #ccc; } </style> </head> <body> <div id="overflowTest"> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> </div> </body> </html> </run> == CSS Overflow == CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。 overflow属性有以下值: {| class="table table-striped table-hover" ! 值 ! 描述 |- | visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |- | hidden | 内容会被修剪,并且其余内容是不可见的。 |- | scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |- | auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |- | inherit | 规定应该从父元素继承 overflow 属性的值。 |} '''注意:'''overflow 属性只工作于指定高度的块元素上。 '''注意:''' 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。 == overflow: visible == 默认情况下,overflow 的值为 visible, 意思是内容溢出元素框: 这里的文本内容会溢出元素框。 这里的文本内容会溢出元素框。 这里的文本内容会溢出元素框。 这里的文本内容会溢出元素框。 这里的文本内容会溢出元素框。 这里的文本内容会溢出元素框。 这里的文本内容会溢出元素框。 <sample title="" desc="" lang="html" hererun="1"> div { width: 200px; height: 50px; background-color: #eee; overflow: visible; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: visible; } </style> </head> <body> <div id="overflowTest"> <p>这里的文本内容会溢出元素框。</p> <p>这里的文本内容会溢出元素框。</p> <p>这里的文本内容会溢出元素框。</p> </div> </body> </html> </run>
返回至“
CSS Overflow
”。
上一节:
CSS_Position(定位)
下一节:
CSS_Float(浮动)