css应用overflow特性操纵翻转条的款式

2021-03-09 05:20 jianzhan
翻转条款式关键涉及到到以下overflow特性:

overflow特性: 查找或设定当目标的內容超出其特定高宽比及宽度时怎样显示信息內容,其用到的主要表现方式和值有下列几种

overflow: auto; 在必须时內容会全自动加上翻转条
overflow: scroll; 一直显示信息翻转条
overflow-x: hidden; 严禁横向的翻转条
overflow-y: scroll; 一直显示信息纵向翻转条

以上3个特性设定的值为visible、scroll、hidden、auto

visible 默认设置值。应用该值时,不管设定的"width"和"height"的值是是多少,在其中的內容不管是不是超过范畴都将被强制性显示信息。
hidden 实际效果与visible相反。任何超过"width"和"height"的內容都会不能见。
scroll 不管內容是不是跨越范畴,都将显示信息翻转条。
auto 当內容超过范畴时,显示信息翻转条,不然无法显示。

翻转条overflow特性的运用

拷贝编码
编码以下:

/*沒有水平翻转条*/
<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>

自定翻转条的款式案例

拷贝编码
编码以下:

Body {}{
scrollbar-arrow-color: #f4ae21; /**//*3角箭头的色调*/
scrollbar-face-color: #333; /**//*立体式翻转条的色调*/
scrollbar⑶dlight-color: #666; /**//*立体式翻转条亮边的颜
色*/
scrollbar-highlight-color: #666; /**//*翻转条空白一部分的
色调*/
scrollbar-shadow-color: #999; /**//*立体式翻转条黑影的颜
色*/
scrollbar-darkshadow-color: #666; /**//*立体式翻转条强阴
影的色调*/
scrollbar-track-color: #666; /**//*立体式翻转条情况色调*/
scrollbar-base-color:#f8f8f8; /**//*翻转条的基础色调*/
Cursor:url(mouse.cur); /**//*自定个性化电脑鼠标*/
}