“Pr pos overflow”的版本间差异

本页内容
上一节: Pr_pos_left 下一节: Pr_class_position
(创建页面,内容为“{{DISPLAYTITLE:overflow}}5 = 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:…”)
 
Neo讨论 | 贡献
(文本替换 - 替换“学的不仅是技术,更是梦想”为“学习使人快乐”)
 
(未显示同一用户的2个中间版本)
第1行: 第1行:
{{DISPLAYTITLE:overflow}}[[Category:css positioning|5]]
{{DISPLAYTITLE:overflow}}[[Category:css reference|166]]
= CSS overflow 属性 =
= CSS overflow 属性 =


第62行: 第62行:


<h2>overflow: scroll:</h2>
<h2>overflow: scroll:</h2>
<div class="ex1">小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!</div>
<div class="ex1">小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!</div>


<h2>overflow: hidden:</h2>
<h2>overflow: hidden:</h2>
<div class="ex2">小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!</div>
<div class="ex2">小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!</div>


<h2>overflow: auto:</h2>
<h2>overflow: auto:</h2>
<div class="ex3">小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!</div>
<div class="ex3">小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!</div>


<h2>overflow: visible (默认):</h2>
<h2>overflow: visible (默认):</h2>
<div class="ex4">小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!小白教程 -- 学的不仅是技术,更是梦想!!!</div>
<div class="ex4">小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!小白教程 -- 学习使人快乐!!!</div>


</body>
</body>
第99行: 第99行:
{| class="table table-striped table-hover"
{| class="table table-striped table-hover"
! 属性
! 属性
!
! Chrome
!
! Internet Explorer / Edge
!
! Firefox
!
! Safari
!
! Opera
|-
|-
| overflow
| overflow

2022年8月20日 (六) 16:14的最新版本

CSS overflow 属性

设置不同 overflow 属性值:


示例

div.ex1 {
    overflow: scroll;
}

div.ex2 {
    overflow: hidden;
}

div.ex3 {
    overflow: auto;
}

div.ex4 {
    overflow: visible;
}

属性定义及使用说明

overflow属性指定如果内容溢出一个元素的框,会发生什么。

默认值: visible
继承: no
版本: CSS2
JavaScript 语法: object.style.overflow="scroll"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性 Chrome Internet Explorer / Edge Firefox Safari Opera
overflow 1.0 4.0 1.0 1.0 7.0

注意:在X Lion(Mac OS),滚动条显示默认是隐藏的,只有当被使用(即使"overflow:scroll"已设置)。

属性值

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

相关文章

CSS 教程: CSS Positioning

上一节: Pr_pos_left 下一节: Pr_class_position
此页面最后编辑于2022年8月20日 (星期六) 16:14。