css overflow属性(转)
- - Web前端 - ITeye博客1,Overflow内容溢出时的设置. overflow 水平及垂直方向内容溢出时的设置. overflow-x 水平方向内容溢出时的设置. overflow-y 垂直方向内容溢出时的设置. 以上三个属性设置的值为visible、scroll、hidden、auto. visible 默认值.
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推荐
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中的z-index属性
- - IT技术博客大学习标签： z-index. css中z-index也是常用的一个属性，这个z-index说的就是第三轴的位置，网页实际是二维的，但是页面上的元素堆叠的层次就可以看作为第三轴，所以z-index也就很好理解了，在z轴上的索引. 好吧我再说的直白一点这里的z-index指的就是哪个元素显示在上面，哪个显示在下面，数值越大的越靠上，会把z-index值比较小的元素挡住.
Stack Overflow 的現況…
- - Gea-Suan Lin's BLOGStack 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 的子站点而已.
Git branching strategy integated with testing/QA process - Stack Overflow
- -In case a feature would not be accepted after testing but we would like to release other features already merged on develop that would be hell. This is a tricky step, I think the best way to avoid it is to keep features as small/specific as possible.