CSS之overflow属性详解
本文详细探讨了CSS中overflow属性的各个方面，包括其五种取值、overflow-x和overflow-y的差异、兼容性问题，特别是在IE7下的表现。讨论了滚动条的出现条件、宽度机制以及自定义滚动条的方法。此外，还阐述了overflow与BFC的关系，如何用于清除浮动、避免margin穿透以及在布局中的应用。最后，分析了overflow与绝对定位的交互，以及在resize和文字溢出时的样式表现。
第1章 基本属性
1.1overflow的五种取值
- visible（默认）
- hidden
- scroll
- auto
- inherit
1.2overflow-x和overflow-y（IE8+）
两种情况：
1.overflow-x和overflow-y值相同，则等同于overflow
2.overflow-x和overflow-y值不同，并且一个被赋予visible，另一个被赋予hidden、scroll、或auto，则visible会被重置为auto。
1.3兼容性
1.3.1燕环肥瘦，各有千秋
各个浏览器滚动条的样式不一样
1.3.2宽度设定机制不同
.box{width:400px;height:100px;overflow:auto;}
.content{width:100%;height:200px;background:red;}
<div class="box">
<div class="content"></div>
</div>由于内层的div高度大于外层的div高度，所以垂直方向会出现滚动条；
内层的div宽度设置100%,和外层div宽度一直，按道理是不会出现水平滚动条的。
但是事与愿违：IE7下水平滚动条也会出现。
这是因为：垂直方向出现滚动条后，外层div宽度就不是400px了，比400px小，而这是内层div的宽度100%仍然被计算成400px，因此就出现了这个现象。
1.4起作用的前提
1.非display:inline 水平
2.对应方位的尺寸限制：width/height/max-width/max-height/absolute 拉伸
.size{max-width:200px;max-height:300px;overflow:auto;}
<div>
<img src="mm.jpg" width="256" height="191"/>
</div>道理上只会出现水平滚动条，但是IE7水平垂直的滚动条都出现了
3.对于单元格<td>等，还需要table为table-layout:fixed状态才行
1.5overflow:visible妙用
IE7浏览器下，文字越多，按钮两侧padding留白就越大！！！
第2章 overflow与滚动条
2.1滚动条出现的条件
1.overflow:auto/overflow:scroll—-<html>/<textarea>
2.草窝藏不住凤凰，潜水困不住蛟龙
2.2body/html与滚动条
无论什么浏览器，默认滚动条均来自<html>!而不是<body>
新建一个空白HTML页面，<body>默认.5em margin值，如果滚动条来自<body>，则应该有边距，如图1；而不是现在的靠着浏览器边缘，如图2
IE7-浏览器默认：html{overflow-y:scroll}
IE8+浏览器默认：html{overflow:auto}
所以，如果我们想要去除页面默认滚动条，只需要：
html{overflow:hidden;}
而没有必要把<body>也拉下水
html,body{overflow:hidden;}
2.3javaScript与滚动高度
-Chrome浏览器是：document.body.scrollTop
-其他浏览器是：document.documentElement.scrollTop
目前，两者不会同时存在，因此，坊间流传这类写法：
var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
建议使用：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop；
2.4overflow的padding-bottom缺失现象
.box{width:400px;height:100px;padding:100px 0;overflow:auto;}
导致：不一样的scrollHeight（元素内容高度）
2.5滚动条的宽度机制
一句话：滚动条会占用容器的可用宽度和高度
2.6滚动条的宽度
准确的说法应该是滚动栏的宽度。下面的方法可以简单获得：
.box{width:400px;overflow:scroll;}
.in{zoom:1;/* for IE7*/}<div class="box">
<div id="in" class="in"></div>
</div>console.log(400 - document.getElementById("in").clientWidth)**结论：**IE7+/Chrome/FireFox(window7) 均为17像素
2.7overflow:auto的潜在布局隐患
滚动条会占用容器尺寸，原本和谐的布局，滚动条出现后可能挂掉！！
1.8水平居中跳动问题
.container{width:1150px;margin:0 auto}问题修复：
1.html{overflow-y:scroll;}
2.container{padding-left:calc(100vw - 100%)}
IE9+支持
2.9自定义滚动条-webkit
2.10IOS原声滚动回调效果
-webkit-overflow-scrolling:touch;
第3章 overflow与BFC
3.1BFC为哪般？
BFC（Block formatting context）-“块级格式化上下文”
特性：页面之结界，内部元素再怎么翻云覆雨都不会与影响外部。
3.2使用场景
1.清除浮动影响
2.避免margin穿透问题
3.两栏自适应布局
3.2.1清除浮动（内部浮动无影响）
3.2.2避免margin穿透问题
注意：overflow只是万千方法中的一个
3.2.3两栏自适应布局
为什么会这么表现？？？？？？？
疑问：
是不是所有BFC属性都有如此表现？
回答：YES。但是由于自身特性，具体表现不一：
- overflow:hidden;自适应，但“溢出不可见”限制应用场景
- float+float 包裹性+破坏性，无法自适应，块状浮动布局
- position:absolute 脱离文档流，自娱自乐
- display:inline-block 包裹性，无法自适应；IE6/IE7 block水平不相识
- display:table-cell 包裹性，单天生无一处特性，绝对宽度也能自适应。
跟清楚浮动影响类似：
.cell{overflow:hidden;display:inline-block;}
然而，副作用明显，无法广泛应用~~于是，广为流传的事：
.cell{
display:table-cell;width:2000px;//IE8+ BFC特性
display:inline-block;width:auto;//IE7- 伪BFC特性
}第4章 overflow与绝对定位
4.1overflow:hidden失效
4.2overflow滚动失效
失效原因：
绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候
包含块指：含有position:relative/absolute/fixed声明的父级元素，没有则body元素。
如何避免失效？
1.overflow元素自身为包含块；
2.子元素为包含块
3.任何合法transform声明当做包含块（新）
第5章依赖overflow的样式表现
5.1resize拉伸
按钮拉伸，overflow:hidden;
文本域默认可拉伸，因为overflow:auto
5.2ellipsis文字溢出点点点省略
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
扫一扫
1121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
