overflow属性

overflow的属性值:1.visible---溢出什么都不做,但IE6会自动撑开容器。

                         2.hidden---溢出隐藏,像是剪裁掉。

                         3.scroll--x轴,y轴都有滚动条。滚动条出现不会改变容器的宽高,内容会随宽高滚动。

                         4.auto--哪个方向溢出哪个方向滚动条。

                         5.inherit--继承

overflow-x和overflow-y:如果值相同,则正常样式,值不同,其中一个正常为visible,另一个hidden,scroll,auto后,visible的会自动变为auto了(会出现滚动条的)。

注意点:1.IE7当内容宽100%时,会和容器宽一样,会有滚动条出现。IE7遇到宽的问题,可以试试加overflow:visible;

           2.滚动条来自<html>,html{overflow:auto...};单页是html{overflow:hidden};

           3.滚动条默认宽17px(大概);

           4.除了chrome,其他浏览器滚动条内的padding-bottom会失效。

           5.水平居中跳动问题的修复a.html{overflow-y:scroll}b..container{padding-left:calc(100vw-100%);}100vw浏览器宽度,100%可用内容宽度。

           6.overflow的容器,内部元素浮动不会影响。(可用来清除浮动);

自定义滚动条---::-webkit-scrollbar{8px};  ::webkit-scrollbar-thumb{backgroung-color:red;};拖动条的背景;

                    ::-webkit-scrollbar-track{background-color:gray};背景槽;

原文地址:https://www.cnblogs.com/zhangxinxin111/p/4711074.html