overflow基本属性值
visible(默认值):超出依然显示
hidden :超出隐藏
scroll :超出,滚动显示。子元素不超出也会有滚动条的那条轨道。
auto:如果超出,滚动显示。如果不超出,也不会有滚动条的位置。
inherit:ie8+,继承父元素的overflow属性值。
overflow-x/y(ie8+)规范:
如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。
如果overflow-x、overflow-y的值不相同,且其中一个属性的值被赋予visible,而另一个被赋予scroll、auto、hidden等值,那么visible会被重置为auto。
比如:overflow-x:hidden;那么overflow-y就会被重置为auto。
兼容性:
- 长得不一样
- 宽度设定机制差异
overflow属性起作用的条件:
display非inline
对应方位的尺寸限制,有width/height/max-width/max-height/absolute拉伸
对于单元格td等,还需要table为
table-layout:fixed;
状态才行
overflow妙用
IE7浏览器下,文字越多,按钮两侧的padding留白就越大。其他浏览器则正常。
解决: 给所有按钮添加css样式:overflow:visible;后就可以了。
overflow与滚动条
滚动条出现的条件
overflow:auto;
或overflow: scroll;
html
、textarea
等元素天生自带overflow:auto;功能。
内容尺寸超出了容器尺寸的额限制
滚动条的宽度机制
滚动条会占用容器的可用宽度或高度
IE7/Chrome/FireFox(Win7)下都是17像素
滚动条与body/html关系
无论什么浏览器,默认滚动条均来自html
元素而不是body
标签。
其overflow值默认为auto。
所以,如果在单页应用中想要去掉页面的默认滚动条效果,只需要:
html{overflow: hidden;}
没有必要设置body。因为页面滚动条不是作用在body上的。
新建一个空白页面,body标签有一个0.5em的默认margin值。
自定义滚动条插件
Jquery自定义滚动条,
git地址,兼容到ie8+以上浏览器
js滚动高度
Chrome浏览器写法:
document.body.scrollTop
其他浏览器:
document.documentElement.scrollTop
二者不会同时存在,兼容写法:
var oH = document.body.scrollTop || document.documentElement.scrollTop;
overflow的padding-bottom缺失现象:(非chrome)
即,如果父元素中内容高度超出出现滚动条,同时父元素又有padding-bottom值,那么在非chrome浏览器中,padding-bottom可能不在滚动高度计算范围内。
这种现象会导致,scrollTop(元素内容高度)的计算差异
移动端滚动技能——ios原生滚动回调效果:
-webkit-overflow-scrolling:touch;
overflow与BFC
BFC(Block formatting context):块级格式化上下文
就像一个水杯,一个容器。元素内部再怎么搅拌折腾都撒不出来,影响不了外部。
BFC元素不会让元素及元素内部的内容与外边有任何瓜葛。、所以形成BFC的元素可以清除浮动带来的影响,不然的话,子元素浮动,父元素塌陷,父元素的兄弟元素会和父元素的子元素重叠,就违背了bfc的初衷,所以要清除浮动带来的影响。
可以触发BFC的overflow属性值:
scroll、auto、hidden这三个可以触发元素的BFC特性。visible不会。
可以触发BFC的几种情况分析:
overflow: 非visible;有自适应性,但是溢出不可见限制了其使用场景
float + float: 包裹性+破坏性。但是无法自适应。只适用于块状浮动布局。
position: absolute;元素脱离文档流。但是属于单个元素的自娱自乐。
display:inline-block;包裹性,无法自适应。但是IE6/7 block水平不相识
display:table-cell;包裹性,但是天生无溢出特性,宽度再宽也不会超出父容器。绝对宽度也能自适应。
利用overflow形成BFC的应用:
- 清除浮动影响
- 父元素设置overflow:auto/scroll/hidden;可以清除子元素浮动带来的影响。(形成bfc结界,与外界隔绝)
仅支持ie7+及现代浏览器
避免margin穿透/重叠问题(形成bfc结界,与外界隔绝)
两栏自适应布局
overflow与absolute
隐藏失效
即overflow:hidden;
失效。
当元素设置position:absolute;
绝对定位且无方位值(left、right、bottom、top)设置。
并且父元素没有设置position:relative;限制子元素的时候,子元素就不受父元素overflow:hidden;的限制,即使超出也不会被隐藏了!