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;
    • htmltextarea等元素天生自带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的应用:

  1. 清除浮动影响
  • 父元素设置overflow:auto/scroll/hidden;可以清除子元素浮动带来的影响。(形成bfc结界,与外界隔绝)

仅支持ie7+及现代浏览器

  1. 避免margin穿透/重叠问题(形成bfc结界,与外界隔绝)
  2. 两栏自适应布局

overflow与absolute

隐藏失效

overflow:hidden;失效。 当元素设置position:absolute;绝对定位且无方位值(left、right、bottom、top)设置。 并且父元素没有设置position:relative;限制子元素的时候,子元素就不受父元素overflow:hidden;的限制,即使超出也不会被隐藏了!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

轮播图效果,不再局限于JS制作!

HTML5学堂(码匠):网页的轮播图一直都是个比较精美的制作,同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写,由此不禁会问,难道...

95960
来自专栏IMWeb前端团队

浅谈CSS3多列布局

相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: ? 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须...

21680
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

99690
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

11120
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

31200
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

36260
来自专栏前端小叙

绝对定位多个字居中显示的css

在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定...

28890
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(二)

还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区...

43280
来自专栏Python攻城狮

HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

44530
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

69210

扫码关注云+社区

领取腾讯云代金券