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与锚点技术