css overflow属性(转)

标签: css overflow 属性 | 发表时间:2013-11-14 09:04 | 作者:vance_sunny
出处:http://www.iteye.com
1,Overflow内容溢出时的设置

    overflow 水平及垂直方向内容溢出时的设置
    overflow-x 水平方向内容溢出时的设置
    overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

    visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。

    hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围,都将显示滚动条。

    auto 当内容超出范围时,显示滚动条,否则不显示。

应用:

没有水平滚动条:
<div style="overflow-x:hidden">test</div>

没有垂直滚动条
<div style="overflow-y:hidden">test</div>


没有滚动条
<div style="overflow-x:hidden;overflow-y:hidden" 或style="overflow:hidden">test</div>

自动显示滚动条
<div style="height:100px;width:100px;overflow:auto;">test</div>

2,自己定义滚动条的颜色

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/

scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/

scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/

scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/

scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/

scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/

scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}

以上2项适用与<body>、<div>、<textarea>、<iframe>

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [css overflow 属性] 推荐:

css overflow属性(转)

- - Web前端 - ITeye博客
1,Overflow内容溢出时的设置.     overflow 水平及垂直方向内容溢出时的设置.     overflow-x 水平方向内容溢出时的设置.     overflow-y 垂直方向内容溢出时的设置. 以上三个属性设置的值为visible、scroll、hidden、auto.     visible 默认值.

CSS中的z-index属性

- - IT技术博客大学习
标签:   z-index. css中z-index也是常用的一个属性,这个z-index说的就是第三轴的位置,网页实际是二维的,但是页面上的元素堆叠的层次就可以看作为第三轴,所以z-index也就很好理解了,在z轴上的索引. 好吧我再说的直白一点这里的z-index指的就是哪个元素显示在上面,哪个显示在下面,数值越大的越靠上,会把z-index值比较小的元素挡住.

Stack Overflow 的現況…

- - Gea-Suan Lin's BLOG
Stack Overflow 的 Nick Craver 貼出目前 Stack Overflow 的現況:「 What it takes to run Stack Overflow」. 公開出來的資料不包括 CDN 的部份,可以看出整個架構很精簡啊… 然後還貼出機房照片:. 可以看出很多機器都很大台,尤其是 RAM 的部份.

小tip:巧用CSS3属性作为CSS hack

- 逸川 - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1867. 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. ————- 假设这是大家全神贯注思考的18分钟 ————————.

说说Stack Overflow和Quora

- corleone1969 - robbin的自言自语
今天看到一个新闻,Quora的中国克隆“知乎”得到了创新工场的投资. 我之前从创新工场的投资经理张亮那里要到了一个知乎邀请码,最近一直泡知乎,觉得Quora类的产品有很多创新的亮点,所以比较感兴趣这类产品,忍不住就谈谈. Stack Overflow(以下简称SO)和Quora虽然都是知识问答类的网站,但是他们有共同的成功基因,也有本质的差别.

java - C3P0: unreturnedConnectionTimeout in production? - Stack Overflow

- -
unreturnedConnectionTimeoutin production mostly if for some reason you can't debug and fix the application whose Connections are leaking, in which case it's a reasonable workaround to just set.

How to configure autoscaling on docker swarm? - Stack Overflow

- -
This will involve a lot of scripting but the idea is to monitor the cluster for CPU / Memory / Network usage (with.

打造自适应网站只用一个CSS属性就够了

- - 掘金前端
用一个CSS属性创建一个响应式网站,让我们来看看它是如何做到的. 以这个模板为例,没有应用css属性. clamp() CSS函数,我们可以创建仅具有一个属性的响应式网站. clamp(minimum, preferred, maximum); 复制代码. clamp() 的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间.

为什么 Stack Overflow 会如此成功?

- XXL - DBA Notes
说起问答(Question & Answer)网站,很多人会第一反应想起 Quora ,实际上,这类网站中 Quora 并非做的最好的(但或许是借了 Facebook 的风头),最为成功的要数 Stack Overflow. 更为准确的说,是 Stack Exchange Network,Stack Overflow 现在只是 Stack Exchange network 的子站点而已.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.