CSSoverflow属性详解

浏览器支持

所有主流浏览器都支持 overflow 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

可能的值

visible 默认值。内容不会被修剪，会呈现在元素框之外。

  <div class="box_visible">visible  默认值。内容不会被修剪，会呈现在元素框之外。visible    默认值。内容不会被修剪，会呈现在元素框之外。</div>.box_visible{width: 100px;height: 100px;background-color: red;overflow: visible;}

hidden 内容会被修剪，并且其余内容是不可见的。

    <div class="box_hidden">hidden  内容会被修剪，并且其余内容是不可见的。hidden    内容会被修剪，并且其余内容是不可见的。</div>.box_hidden{width: 100px;height: 100px;background-color:royalblue;overflow: hidden;}

scroll 超出内容被修剪但会显示左右上下滚动条来查看超出内容。

<div class="box_scroll">scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。scroll   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</div>.box_scroll{width: 100px;height: 100px;background-color: aqua;overflow: scroll;}

auto 如果内容被修剪，则浏览器会显示上下滚动条以便查看其余的内容

 <div class="box_auto">auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</div>.box_auto{width: 100px;height: 100px;background-color: bisque;overflow: auto;}

 <div class="box_inherit">inherit   规定应该从父元素继承 overflow 属性的值。inherit    规定应该从父元素继承 overflow 属性的值。</div>.box_inherit{width: 100px;height: 100px;background-color: blueviolet;overflow: inherit;}

CSS3overflow-y属性

作用：overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。

提示：使用overflow-x属性来判断左右边缘是否裁剪。

语法：

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

visible：不裁剪内容，可能会显示在内容框之外。

hidden：裁剪内容 - 不提供滚动机制。

scroll：裁剪内容 - 提供滚动机制。

auto：如果溢出框，则应该提供滚动机制。

no-display：如果内容不适合内容框，则删除整个框。

no-content：如果内容不适合内容框，则隐藏整个内容。

说明：所有主流浏览器都支持 overflow-y 属性；但无法在 IE8 以及更早的浏览器正确地工作。
同上overflow-x属性

CSSoverflow属性详解相关推荐

python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
Meta http-equiv属性详解
Meta http-equiv属性详解博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
JavaScript Function.arguments 属性详解
转载自 JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...
vertical-align属性详解
vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...
border-sizing属性详解和应用
box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有 content-box . border-box 和 inherit 三种取值. inherit 指的是从父元素继 ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
android layout_width 属性,android：layout_weight属性详解
在android开发中LinearLayout很常用,LinearLayout的内控件的android:layout_weight在某些场景显得非常重要,比如我们需要按比例显示.android并没用提 ...
html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...

CSSoverflow属性详解

CSSoverflow属性详解相关推荐

最新文章

热门文章