overflow - fangdiao/Notes GitHub Wiki
#深入理解overflow
####overflow的基本属性
1.visible: 对溢出内容不做处理,内容可能会超出容器。
2.hidden: 隐藏溢出容器的内容且不出现滚动条。
3.scroll: 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
4.auto: 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
####overflow-x.overflow-y
两者值相同时。overflow=overflow-x+overflow-y
不同时,当两者其一设置为hidden/sroll/auto时,另一个为visible,则visible会被重置为auto。
####html,body滚动条
浏览器默认滚动条均来自html,IE6,7默认sroll,IE8+,默认auto,
####overflow的padding-bottom缺失现象
Chrome浏览器不缺失,其他所有浏览器都缺失,导致不一样的scrollHeight(元素内容高度)。
####滚动条宽度机制
滚动条会占用浏览器的可用宽度,高度,占用容器空间,可能会导致布局出错。使用自适应布局,或者为滚动条预留高宽度
####出现滚动条水平居中跳动问题修复
padding-left:calc(100vw-100%);
100vw:浏览器高度,100%:可用内容宽度
####滚动条自定义
####overfolw与BFC
BFC(Block formatting context),块级格式化上线文
####BFC作用
1.清除浮动影响
2.避免margin穿透问题
3.两栏自适应布局
####两栏自适应布局
IE8+:
display:table-cell;width:2000px;
IE7-:*display:inline-block;*width:auto;
####overflow与绝对定位
overflow元素正好在绝对定位元素和包含块之间,overflow失效。
#####避免失效
1.overfolw元素自身为包含块
2.overflow元素的子元素为包含块
3.任意合法的transfrom当做包含块
####依赖overflow的样式表现
1.CSS3,relize(拉伸)属性,overflow属性值不能为visible。relise拖拽区域大小:17px*17px,与滚动条一样。
2.ellisis文字溢出属性
####overflow与锚点技术