zoukankan      html  css  js  c++  java
  • 高级前端进阶(二)

    恭喜EDG夺冠!!!

    滚动条挤压页面问题(开胃小菜)

    滚动条挤压页面,我们可能没怎么注意到这个问题。
    直接看图吧

    看到没有,滚动条差不多占据了17px左右的宽度。 计算公式为:
    let container = document.getElementById("container");
    let scrollWidth = container.offsetWidth - container.clientWidth;
    console.log('scrollWidth', scrollWidth); // 谷歌浏览器滚动条占据17px
    

    如何让滚动条不挤压页面呢?
    overflow还有个值就是overlay,相当于让滚动条悬浮。这个方法只适用于谷歌浏览器。
    还有个方法很自然能够想到,既然滚动条占据17px,那通过margin-right: -17px,不就行了,专门弄出17px给滚动条即可,然后页面padding-right: 17px,这样就不会出现挤压页面的问题了。
    本质就是滚动条占据了容器的17px宽度,根据这个可以衍生出很多方法。
    所谓一生二,二生三,三生万物。本质上是不变的。

    一、CSS中的圣杯布局跟双飞翼布局

    这两种布局都是三栏布局,而且实现的效果都是一样的,中间的一块宽度自适应,并且是先加载。
    圣杯布局跟双飞翼布局,这两种布局方式,我们应该或多或少接触过。以前主要是通过浮动float来实现的,但现在有了flex,以前的方式就不香了,毕竟有更好的布局方式了。
    在这里,着重讲解一下,通过flex实现圣杯布局或者双飞翼布局的效果。
    代码很简单。

    <div class="container">
        <diV class="main">main</diV>
        <diV class="left">left</diV>
        <diV class="right">right</diV>
    </div>
    
    /*scss*/
    .container{
        display: flex;
        justify-content: center;
        .main{
            flex-grow: 1;
            order: 2;
            background-color: red;
        }
        .left{
            flex-basis: 200px;
            order: 1;
            background-color: orange;
        }
        .right{
            flex-basis: 200px;
            order: 3;
            background-color: paleturquoise;
        }
    }
    

    浏览器是从左到右解析代码的,所以我们要让main部分在最左边,然后通过order来处理位置。让flex-grow来实现自适应效果。
    简单吧!

    二、复习一下上次讲解的有关递归知识

    list转树型数据(上一篇博客地址)
    寻找树型数据中的某个节点(包含所有的子节点)

    function findTreeNode(tree, fn, childrenName) {
        if (childrenName == undefined)
            childrenName = 'children';
        for (let item of tree) {
            if (fn(item))
                return item;
            if (item[childrenName]) {
                let res = findTreeNode(item[childrenName], fn);
                if (res)
                    return res;
            }
        }
    }
    let treeNode = findTreeNode(listToTree(treeList), (item) => item.id == 1);// 使用的是上篇博客的数据
    console.log("treeNode", treeNode);// {"id":1,"pid":0,"name":"一级数据1","children":[{"id":4,"pid":1,"name":"二级数据2-1"},{"id":5,"pid":1,"name":"二级数据2-2"},{"id":6,"pid":1,"name":"二级数据2-3"}]}
    

    三、改变this指向问题

    复习一下,apply,call,bind这三种方法。

    function test(item) {
      console.log(item);
    }
    var param = {
      q: 1,
      w: 2
    };
    test(param);
    test.apply(null, [param]);
    test.call(null, param);
    test.bind(null, param)();// 以上四者是等价的
    // 更改this指向
    var obj = {
      param: {
        z: 6
      },
      newTest(item) {
        console.log(this.param)
        //console.log(item);
      }
    }
    obj.newTest.apply(this, [param]);// 等价于 obj.newTest.apply(window, [param]);// 输出 {"q":1,"w":2}
    obj.newTest.apply(obj, [param]);// 输出 {"z":6}
    

    四、恭喜EDG夺冠!!!

  • 相关阅读:
    Struts2+Spring3+Mybatis3开发环境搭建
    spring+struts2+mybatis
    【LeetCode】Populating Next Right Pointers in Each Node
    【LeetCode】Remove Duplicates from Sorted Array
    【LeetCode】Remove Duplicates from Sorted Array II
    【LeetCode】Binary Tree Inorder Traversal
    【LeetCode】Merge Two Sorted Lists
    【LeetCode】Reverse Integer
    【LeetCode】Same Tree
    【LeetCode】Maximum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/ywjbokeyuan/p/15111573.html
Copyright © 2011-2022 走看看