1.如果overflow-x与overflow-y值不同
   其中一个赋值为visiable,另一个赋值scroll/auto/hidden,那么visiable会重置为auto

2.overflow:visible妙用
   IE7下,文字越多,按钮两侧的padding留白就越大!-bug
   解决办法:<button sytle="overflow:visible"></button>

3.overflow与滚动条
   无论什么浏览器,默认滚动条均来自html,而不是body
   IE7默认-html{overflow-y:scroll;}
   IE8+默认-html{overflow:auto;}
   去除页面默认滚动条: html{overflow:hidden;}
   注意:下面的写法是冗余的
   html,body{overflow:hidden;},滚动条与body无关,给body设置overflow无意义

* 获得滚动条滚动的高度
    * chrome : document.body.scrollTop;
    * 其他 : document.documentElement.scrollTop;
    * 兼容 : document.documentElement.scrollTop || document.body.scrollTop;

* overflow的padding-bottom缺失现象(只有chrome不会出现)
    这样就照成不一样的scrollHieight

* 滚动条的宽度机制
     滚动条会占用容器的可用宽度或高度,所以在布局时要使用自适应或预留滚动条的宽度

解决,当出现滚动条时,水平居中元素跳动问题的办法:
   .container{
        width:100%;
        padding-left:calc(100vw-100%);/*100vw是浏览器宽度,100%是可用内容宽度,相减就是滚动条的宽度*/
    }

* 自定义滚动条

     * -webkit

       ::webkit-scrollbar{width:8px;height:8px;}/*血槽高度*/

       ::webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);}/*拖动条*/

       ::webkit-scrollbar-track{background-color:#ddd;border-radius:6px;}/*背景槽*/
     * IE浏览器: 去他地吧

* ios原生滚动超边界效果

4.overflow与absolut
   父元素overflow:hidden/scroll,内部元素absolute,会产生失效

5.resize拉伸(css3)
   resize:both; - 水平垂直两边拉
   resize:horizontal; - 水平拉
   resize:vertical; - 垂直拉
   注意: 此声明要想起作用,元素的overflow不能是visible

6.text-overflow:ellipsis 与 overflow:hidden 一起使用
   实现文本溢出省略号显示

7.overflow与锚点应用
   滚床单(锚点的本质:改变容器的滚动高度)条件:容器可滚动且锚点元素在容器内部

比较牛逼的做法:实现选项卡(无js,兼容性嗷嗷地)
    注意:适用场景,页面为单屏页面,否也会影响html的滚动条

深入了解overflow的更多相关文章

  1. 【转载】C# 中的委托和事件(详解)

    <div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...

  2. Stack Overflow 排错翻译 - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder

    Stack Overflow 排错翻译  - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder 转自:ht ...

  3. css:overflow属性妙用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  5. 移动端浏览器body的overflow:hidden并没有什么作用

    今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...

  6. Stack Overflow: The Architecture - 2016 Edition(Translation)

    原文: https://nickcraver.com/blog/2016/02/17/stack-overflow-the-architecture-2016-edition/ 作者:Nick Cra ...

  7. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

  8. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

  9. overflow

    1. 隐藏x轴滚动条,垂直有滚动条: <body> <div style="width:100px;height:150px;overflow:scroll;overflo ...

  10. allocation size overflow

    var cityID="1"; var areaHtml=""; var storeHtml=""; //区域异步 function Get ...

随机推荐

  1. openCV 2.4.13 iOS background_segm.hpp 'list' file not found

    最近下载了最新版的OpenCV的Framework. 导入到项目里边,编译.然后就出现了问题 /opencv2.framework/Headers/video/background_segm.hpp: ...

  2. cocosbuilder中的Callbacks和sound effects

    cocosbuilder3中有增加了 Callback和sound effects 的timeline 这个东西用来在动画播放过程中控制音效和回调动作,非常方便 按住option键(alt), 点击t ...

  3. RHCA学习笔记:RH442-Unit9内核定时与进程延时

      Unit 9 Kernel Timing and Process Latency 内核定时与进程延时 学习目标: A.了解CPU 是怎样追踪时间的 B.调整CPU的访问次数 C.调整调度延时 D. ...

  4. 标准I/O的替代软件

    标准I/O并不完善. 标准I/O库的一个不足之处是效率不高,这与它需要复制的数据量有关.当使用每次一行函数fgets和fputs时,通常需要复制两次数据:一次是在内核和标准I/O缓冲之间(当调用rea ...

  5. 可拖拽重排的CollectionView

    来源:wazrx 链接:http://www.jianshu.com/p/8f0153ce17f9 写在前面 这段时间都在忙新项目的事儿,没有时间倒腾,这两天闲下来,想着一直没有细细的研究Collec ...

  6. android开发之wheel控件使用详解

    出门在外生不起病呀,随便两盒药60多块钱.好吧,不废话了,今天我们来看看wheel控件的使用,这是GitHub上的一个开源控件,用起来十分方便,我们可以用它做许多事情,比如做一个自定义的datepic ...

  7. javascript进击(四)HTML DOM

    HTML DOM (文档对象模型) 什么是DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准. W3C 文档对象模型 (DOM) 是中立于平台和语 ...

  8. vi快捷键必知必会

    文本编辑器是所有计算机系统中最常用的一种工具.UNIX下的编辑器有ex,sed和vi等,其中,使用最为广泛的是vi,而vi命令繁多,论坛里好像这方面的总结不多,以下稍做总结,以资共享!渴望更正和补充! ...

  9. 万网免费主机wordpress快速建站教程-域名绑定及备案

    进入主机管理界面,点击管理 点击域名绑定,绑定域名项选择已有域名,选择已购买的域名,点击一键解析域名,点击添加,即可完成域名解析工作. 由于没有备案,备案状态显示为未备案,点击旁边的备案链接,跳转至阿 ...

  10. ASP.NET MVC(一) 什么是Razor

    Razor 是一种向网页添加基于服务器的代码的标记语法 Razor 不是编程与语言.它是服务端标记语言. 当网页被写入浏览器时,基于服务器的代码能够创建动态内容.在网页加载时,服务器在向浏览器返回页面 ...