• 深入了解overflow


    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{
            100%;
            padding-left:calc(100vw-100%);/*100vw是浏览器宽度,100%是可用内容宽度,相减就是滚动条的宽度*/
        }

       * 自定义滚动条

         * -webkit

           ::webkit-scrollbar{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的滚动条

  • 相关阅读:
    和类的初识
    IIFE
    闭包的二次理解
    5分钟搞懂ECE雾计算
    机智云推出设备联动API,打造智能家居场景化
    神奇的【设备联动API】,助力智能家居/家电场景化
    STM32峰会2017:半小时开发基于STM32的室内智能环境监测仪
    STM32峰会:机智云MCU代码开发工具降低智能硬件开发成本
    广和通G510联网固件首发,支持连接机智云
    各种STM32连接机智云案例汇总(不定期更新,欢迎补充)
  • 原文地址:https://www.cnblogs.com/xfz1987/p/5650211.html
Copyright © 2020-2023  润新知