Overflow属性——定义元素(如Div)内容区溢出情况

说明:overflow属性规定当内容溢出元素框时发生的事情。

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

可用的值:

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

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

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

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

inherit:规定应该从父元素继承 overflow 属性的值。

实例:

<html>
  <head>
        <style type="text/css">
            div
                {
                    background-color:#00FFFF;
                    width:100px;
                    height:100px;
                    overflow: scroll
                }
        </style>
  </head>
  <body>
    <div>
      哈哈!吼吼!哈哈!吼吼!哈哈!吼吼!哈哈!吼吼!哈哈!吼吼!
    </div>
  </body>
</html>

详细:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp

时间: 2024-10-11 23:09:41

Overflow属性——定义元素(如Div)内容区溢出情况的相关文章

Z-Index属性——定义元素在页面中的层次

说明:设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴.如果为正数,则离用户更近,为负数则表示离用户更远. 注释:元素可拥有负的 z-index 属性值.Z-index 仅能在定位元素上奏效(例如 position:absolute;)! 可用的值: auto:默认.堆叠顺序与父元素相等. number:设置元素的堆叠顺序. inherit:规定应该从父元素继承 z-index 属性的值. 实例: <html> <head> <style type=&quo

Position属性——定义元素在窗口中的定位类型

说明:定义建立元素布局所用的定位机制. 注释:任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 可用的值: absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed:生成绝对定位的元素,相对于浏览器

overflow属性

css属性overflow属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制. 参数是scroll时候,必会出现滚动条. 参数是auto时候,子元素内容大于父元素时出现滚动条. 参数是visible时候,溢出的内容出现在父元素之外. 参数是hidden时候,溢出隐藏. 参数是inherit时候,应该从父元素继承 overflow 属性的值.

CSS3对于盒中容纳不下的内容的显示——overflow属性

overflow属性 1.如果将overflow属性值设定为hidden,则超出容纳范围的文字将被隐藏起来. div{ overflow:hidden; } 2.如果将overflow属性值设定为scroll,则div元素中将出现固定的水平滚动条与垂直滚动条,文字超出div元素的容纳范围时将被滚动显示. div{ overflow:scroll; } 3.如果将overflow属性值设定为auto,则当文字超出div元素的容纳范围时根据需要出现水平滚动条或垂直滚动条,并且滚动显示超出容纳范围的内

从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分类 HTML5中,元素主要分为7类: Metadata Flow Sectioning Heading Phrasing Embedded Interactive 这些分类集合互相之间也存在一定的交集(一个元素可以同时属于多个分类),其交集关系呈现为: 需要注意的是,HTML5中的这种元素分类与in

Web前端技术:CSS部分深入---盒子模式,overflow属性,border属性,内外边距,水平居中问题,块\行内元素,浮动,层定位

1.盒子模式:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间 2.overflow属性 hidden:超出部分不可见,默认值 scroll:显示滚动条 auto:如果有超出部分,显示滚动条 3.border属性 border-width:px \ thin \ medium \ thick border-style:dashed \ dotted \ solid \ double border-color:颜色 border:width  style color 案例 水平分割线: .

overflow属性失效分析

overflow可以控制超出框内容的显示方式:隐藏.显示.滚动显示 可以取值scroll,表示但凡超出框的内容可以通过滚动条实现浏览,但是如下demo却没有实现滚动显示的功能. 于是仔细看了下overflow的定义:overflow 属性规定当内容溢出元素框时发生的事情. 对比发现, 我理所当然地把body视为元素框了, 于是用div试了下, 发现果然问题出在body上面了. 由此看来:body不是一个元素框 1 <!DOCTYPE html> 2 <html lang="en

关于css中overflow属性

定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 浏览器支持 所有主流浏览器都支持 overflow 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". overflow的值: visible: 默认的值,内容会呈现在元素框之外. hidden: 内容被修剪,被修剪掉的内容会被隐藏. 例: <html> <head> <style type="text/css&

CSS overflow 属性

实例 设置 overflow 属性: div { width:150px; height:150px; overflow:scroll; } 亲自试一试 浏览器支持 所有主流浏览器都支持 overflow 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 说明 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理