CSS深入理解之overflow

前言

这是跟着张鑫旭重学CSS的overflow篇

基本属性

overflow有以下五个基本属性:

1.visible : 默认值,具体表现为,应用此属性后,子元素超出时,继续展示;

2.hidden: 超出的部分隐藏;

3.scroll: 超出时展示滚动条;

4.auto: 自动判断;

5.inherit:继承父元素

overflow-x和overflow-y是IE8以上浏览器支持的属性,如果overflow-x/y相同,则等同于overflow属性.如果不同,并且一个属性是visible,另一个属性是hidden/auto/scroll,则visible会重置为auto.

如何让overflow起作用

非 display:inline水平;
对应方位的尺寸限制,宽高/最大宽高/absolute拉伸等
对于单元格td元素,需要table为 table-layout:fixed才可以

overflow:visible妙用

IE7浏览器下,文字越多,按钮两侧的padding留白越多,只要给按钮添加一个overflow:visible 属性,即可正常表现

滚动条

出现条件

overflow:auto/scroll
一些默认的元素,比如说html/textarea

说明: 无论说明浏览器,默认滚动条来自<html>而不是body

页面的滚动高度

谷歌浏览器document.body.scrollTop;

其他浏览器:document.documentElement.scrollTop;

两者不会同时存在,建议使用

var st=document.documentElement.scrollTop || document.body.scrollTop

滚动条的宽度机制

滚动条是会占用容器的可用宽度或高度;这个特性可能会对我们的页面布局有一些不好的影响,这就需要我们进行特出是处理

overflow 和
BFC

具体应用有一下几种

清楚浮动影响

在之前的浮动文章中提到过,.浮动会导致父容器高度塌陷,那么这个时候我们可以设置子元素的 overflow:hidden来清除浮动具体的代码这里不说了.
避免margin重叠

我们知道,两个紧邻的元素,设置margin时,两个元素的margin会重叠在一起,那么这个时候我们可以设置元素的overflow值,就可解决这个问题,当然还有其他的方式,比如使用边框/padding或者元素自身BFC化
两栏自适应布局

具体可参看之前的浮动

http://www.cnblogs.com/heyuqing/p/6148488.html

overflow与绝对定位

overflow:hidden/auto失效

当给一个应用了overflow:hidden/auto属性的元素定位为absolute时,其特性失效.

原因: 绝对定位元素不总是被父级overflow属性剪裁,尤其当overflow在绝对定位元素及其包含块之间时;

[包含块]:含有position:relative/absolute/fixed声明的父级元素,没有则为body元素.

如何避免失效

overflow元素自身为包含块;

给overflow元素添加relatIve等属性
overflow子元素为包含块;

在被剪裁元素与overflow元素之间插入一个relative等的元素
任意合法的transform声明当做包含块.

依赖overflow的样式表现

CSS3的resize属性

resize属性可以拉伸元素其属性值为:

both:水平垂直拉伸

horizontal:水平方向拉伸;

vertical:垂直方向拉伸

但是,要想此属性起作用,元素的overflow属性不能为visible.

ellipsis文字溢出...省略

使用text-overflow:ellipsis属性,在文字溢出时,会用省略号来表示多余的文字,前提是元素同时应用overflow:hidden属性