小白教程
所有教程
关于
Search
172.70.127.65
172.70.127.65
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Pr pos overflow”的源代码
本页内容
上一节:
Pr_pos_left
下一节:
Pr_class_position
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:overflow}}[[Category:css reference|166]] = CSS overflow 属性 = 设置不同 overflow 属性值: <sample title="" desc="" lang="html" hererun="1"> div.ex1 { overflow: scroll; } div.ex2 { overflow: hidden; } div.ex3 { overflow: auto; } div.ex4 { overflow: visible; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div.ex1 { background-color: lightblue; width: 110px; height: 110px; overflow: scroll; } div.ex2 { background-color: lightblue; width: 110px; height: 110px; overflow: hidden; } div.ex3 { background-color: lightblue; width: 110px; height: 110px; overflow: auto; } div.ex4 { background-color: lightblue; width: 110px; height: 110px; overflow: visible; } </style> </head> <body> <h1>overflow 属性</h1> <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p> <h2>overflow: scroll:</h2> <div class="ex1">小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!</div> <h2>overflow: hidden:</h2> <div class="ex2">小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!</div> <h2>overflow: auto:</h2> <div class="ex3">小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!</div> <h2>overflow: visible (默认):</h2> <div class="ex4">小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!</div> </body> </html> </run> == 属性定义及使用说明 == overflow属性指定如果内容溢出一个元素的框,会发生什么。 {| class="table table-striped table-hover" | 默认值: | visible |- | 继承: | no |- | 版本: | CSS2 |- | JavaScript 语法: | object.style.overflow="scroll" |} == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |} '''注意:'''在X Lion(Mac OS),滚动条显示默认是隐藏的,只有当被使用(即使"overflow:scroll"已设置)。 == 属性值 == {| class="table table-striped table-hover" ! 值 ! 描述 |- | visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |- | hidden | 内容会被修剪,并且其余内容是不可见的。 |- | scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |- | auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |- | inherit | 规定应该从父元素继承 overflow 属性的值。 |} == 相关文章 == CSS 教程: [[css positioning|CSS Positioning]]
返回至“
Pr pos overflow
”。
上一节:
Pr_pos_left
下一节:
Pr_class_position