深入理解overflow
Posted niusan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入理解overflow相关的知识，希望对你有一定的参考价值。
1,overflow基本属性
visible(默认) ie6会把盒子撑开
hidden 超出部分隐藏
scroll 滚动条
auto 尺寸溢出出现滚动条
inherit IE8+ 以上浏览器支持
如果overflow-x和overflow-y值相同相当于overflow，如果值不同，其中一个属性的值被赋值为visible,而另一个值被赋值为hidden/scroll/auto，
那么这个visible会被重置为auto;
兼容性问题：IE7下子元素设置windth:100%会出现滚动条（滚动条也占宽度）。IE8 则不会，如果想让IE 7滚动条消失，需要删掉width:100%;
overflow属性起作用的前提：
1，非display:inline 水平
2，对应方位的尺寸限制。width/height/max-height/max-width/absolute拉伸
.size { max-width:200px; max-height:300px; overflow:auto; }
<div class="size"><img src="12.jpg" width= "256" height="191" ></div>
** IE7 会出现水平滚动条和垂直滚动条。 IE8 只出现水平滚动条
3，对于单元格td等；还需要table为table-layout:fixed状态才行
overflow：visible
IE7 浏览器下，文字越多，按钮两边的padding留白越大。 添加overflow:visible后正常。
2，overflow与滚动条
无论什么浏览器。默认滚动条均来自<html> 而不是<body>.
IE7 默认html { overflow-y:scroll;}
Ie8+ html { overflow: auto ;}
因此想去除默认页面的滚动条： html { overflow :hidden;}
body/html 与滚动条 -js与滚动高度
Chrome: document.body.scrollTop();
其他浏览器：document.documentElement.scrollTop || document.body.scrollTop ;
voerflow的padding-bottom 缺失现象
.box { width:400px; height:100px; padding: 100px 0; }
滚动条的宽度：IE7、Chrome、Firefox（） 均是17像素
水平居中跳动问题的修复：
1，html { overflow-y:scroll;} IE9以下
2，.container{ padding-left: calc(100vw -100%);} 100vw-浏览器宽度;100%-可用内容宽度。
滚动条的自定义-webkit
实际开发中常用的几个参数
::-webkit-scrollbar { width:8px; height:8px} //血槽宽度
::-webkit-scrollbar-thumb { border-radius:6px;} //拖动条
::-webkit-scrollbar-track {background-color:#ddd; border-radius:6px;} //背景槽
ios 原生滚动回调效果 -webkit-overflow-scrolling:touch;
3,overflow 与块状格式上下文（清除浮动，自适应布局等）
1，清楚浮动 .clearfix {*zoom:1;}
.clearfix:aftere { content:‘‘; display:table;clear:both; }
2，两栏自适应布局
.cell {
display: table-cell;width:2000px; //IE8+ BFC特性
*display；inline-blocck;*width:auto; //IE7- 伪BFC特性。
}
4，overflow 与绝对定位absolute
1，overflow:hidden失效
overflow:auto滚动失效 原因；绝对定位元素不总被父级元素overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候;
包含块：含有position:relative/absolute/fixed声明的父级元素，没有则body元素。
如何避免失效呢？
1，overflow元素自身为包含块； style="position:relative;"
2，overflow元素的子元素为包含块； 子元素relative
3，任意合法transform声明当做包含块new; 1，overflow元素自身transform IE9+/FireFox支持 Chrome/Safari(win)/Opera不支持
2，overflow子元素transfrm IE9+/FireFox 支持 Chrome/Safari(win)/Opera支持
overflow失效的妙用
<div class="h0 ovh tr ">
<img src="fixed-right.png" class="abs ml10 mt30">
</div>
.h0 { height:0;}
.ovh { overflow:hiden;}
.tr {text-align:right;}
.abs {position:absolute;}
5,依赖overflow的样式表现
resize拉伸 （元素的overflow属性值不能是visible！）
1，resize:both 水平垂直，两边拉伸
2，resize:horizontal 只有水平方向拉伸
3，resize:vertical 只有垂直方向拉伸
ellipsis文字溢出点点点省略 text-overflow:ellipsis
button {
width: 50px;
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
}
6,overflow与锚点技术
锚点定位的本质是？ 改变容器的滚动高度。
锚点定位的触发：1，url 2, 可focus的锚点元素处于focus态
锚点定位的作用：1，快速定位
2，overflow选项卡技术
<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>
<div class="link">
<a href="#one">1</a>
<a href="#two">2</a>
<a href="#three">3</a>
<a href="#four">4</a>
</div>
以上是关于深入理解overflow的主要内容，如果未能解决你的问题，请参考以下文章