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属性