css笔记 - 张鑫旭css课程笔记之 overflow 篇

overflow基本属性值

1. visible（默认值）：超出依然显示
2. hidden ：超出隐藏
3. scroll ：超出，滚动显示。子元素不超出也会有滚动条的那条轨道。
4. auto:如果超出，滚动显示。如果不超出，也不会有滚动条的位置。
5. 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。

兼容性：

1. 长得不一样
2. 宽度设定机制差异

overflow属性起作用的条件：

1. display非inline
2. 对应方位的尺寸限制，有width/height/max-width/max-height/absolute拉伸
3. 对于 单元格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；有自适应性，但是溢出不可见限制了其使用场景