1，overflow的基本属性
overflow作用的前提？
(1)，不能是内联元素！
(2)，对尺寸的限制。(width/min-width/height/min-height/absolute拉伸) ！
(3)，如果是单元格td，那么需要对table设置table-layout:fixed才会有效！
新增的overflow-x和overflow-y？
overflow-x和overflow-y相同时，相当于overflow，当其中一个为visible，另外一个为auto,scroll,hidden的时候，前者的visible将会被重置为auto。
2，自定义滚动条
(1)，常用属性
::-webkit-scrollbar{/*血槽宽度*/
width:8px;
height:9px;
}
::-webkit-scrollbar-thumb{/*拖动条*/
background:rgba(0,0,0,.5);
border-radius:6px;
}
::-webkit-scrollbar-track{/*背景槽*/
background:rgba(0,0,0,.5);
border-radius:6px;
}
(2)，默认滚动条？
网页中默认的滚动条来自html,因为如果是body的话，body标签默认有外边距，而浏览器网页明显不存在外边距！
所以不让页面出现滚动可以设置html{overflow:hidden}
而对水平居中出现跳动的方法
html{overflow-y:scroll;}
或者.container{padding-left:calc(100vw - 100%)} /* 兼容性IE9+ */
3，overflow和absolute同在
absolute位置不变？
.father{
overflow:hidden;
width:200px;
height:300px;
}
img.son{
position:absolute;
height:60px;
}
当滑动滚动条的时候，图片位置不变。
原因:绝对元素不总是被overflow属性剪裁，尤其当overflow在absolute和包含块（父级元素为position:relative/absolute/fiexd,没有则是body元素）之间的时候。
如何避免失效？
(1)，让overflow自身为包含块。
(2)，让overflow的子元素为包含块。
(3)，合法的transform声明当做包含块。
overflow内部padding-bottom失效？
使用margin-bottom代替padding-bottom即可。
3，overflow的使用
(1)，绝对定位内部固定妙用
父元素overflow:auto，内部元素A {position:absolute}，内部元素A不会跟随滚动条滚动,可以利用这一特性使元素在父元素中固定位置。
(2)，resize拉伸
.stretching{
resize:both;
overflow:hidden;
}
(3)，文字溢出隐藏
.white{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
(4)，单页选项卡
<li id='one'>1</li>
<li id='two'>2</li>
<a href='#one'>转到1</a>
<a href='#one'>转到2</a>
优点：利用锚点技术，做选项卡，简单快捷。
缺点：只能用于单页应用，因为当页面出现滚动条，且足够高的时候，点击哈希值时，外部滚动条同时向上滚动，这样就使选项卡突然跳动到顶部，影响体验。
(4)，布局中的作用
代码如下：
img{
width: 200px;
float: left;
padding-right: 10px;
}
p{
overflow: hidden;
height: 200px;
}
图一
使用overflow:hidden触发BFC化，清除浮动带来的影响并且使图片文字左右自适应布局。
网友评论