A-A+

CSS之overflow

2016年07月09日 HTML/CSS 暂无评论

overflow-x:hidden;

如果overflow-x和overflow-y的值相同,则等同于overflow。

如果overflow-x和overflow-y的值不同,且其中一个值被赋值为visible,另外一个被赋值为hidden,auto,scroll,则visible会被重置为auto。垂直方向会有滚动条的原因。

让overflow起作用:

1.非display:inline水平

2.对应尺寸的方位限制:width/height/max-width/max-height/absolute拉伸。

3.对应单元格td等,还需为table设置table-layout:fixed状态才可

 

无论什么浏览器,默认滚动条均来自<html>标签而非<body>,(<body>默认有0.5em的margin值。)

IE7- 浏览器 html{overflow-y:scroll}

IE8+ 浏览器 html{overflow:auto;}

去除页面默认滚动条:html{overflow:hidden;}

页面的滚动高度

chrome:document.body.scrollTop;

其他:document.document.Element.scrollTop;

var st=document.body.scrollTop+document.document.Element.scrollTop;

建议使用

var st=document.document.Element.scrollTop||document.body.scrollTop;

overflow的padding-bottom缺省:

chrome和其他浏览器不一样;这可能会导致scrollHeight(元素内容高度)不一样。

滚动条会占用容器的可用宽度或高度,设置overflow:auto,注意自适应,或预留滚动条的值。

水平居中跳动问题的修复:

1. html{overflow-y:scroll}

2.动态修复:padding-left:calc(100vw-100%);

小tip:纯CSS让overflow:auto页面滚动条出现时不跳动 « 张鑫旭-鑫空间-鑫生活

http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

自定义滚动条

实例:

http://output.jsbin.com/gowavi

相关插件:

https://github.com/malihu/malihu-custom-scrollbar-plugin

清除浮动:

.clearfix{*zoom:1;}

.clearfix:after{content:'';display:table;clear:both;}

两栏自适应布局

.cell{display:table-cell;width:2000px; //IE8+ BFC特性

*display:inline-block;*width:auto;//IE7-  伪BFC特性

}

css3 resize(可拉伸元素) 要想起作用,元素的overflow不能为visible。

文本溢出,省略号显示:text-overflow:ellipsis .要写overflow:hidden。

 

 

 

 

注:以上内容来自慕课网张鑫旭老师的课程视频

标签:

给我留言

Copyright © 花未全开月未圆 保留所有权利.   Theme  Ality 海外

用户登录