2020-09-03 html的网站快速下载模板 + css的grid布局与flex布局 + JS的代理console.log方法 + 软技能的android键盘回落后留白

2020-09-03 题目来源：http://www.h-camel.com/index.html

[html] 给你一个参考网站，你能快速下载它的模板吗？用哪些方法？

浏览器的查看网页源代码，但是这样只能给你个结构排版参考，真正的框架需要自己研究。

建议去模板网站找个类似的demo下载进行修改。

[css] grid布局和flex布局有什么区别？

flex用于一维布局，grid用于二维布局。

1.flex 子元素本身来决定放置方式，只需要设置父级元素 display: flex; 使元素居右自适应，margin-left:auto;

2.grid 需要首先定义列和列的宽度，然后将内容防止在相应的单元格中 div：nth-​​child（3）{ grid-column：10; }

[js] 写一个代理console.log的方法

function log(){
    console.log.apply(console,arguments)
}

或者

function log(){
    let arr =  Array.prototype.slice.call(araguments)    
    console.log.apply(console,arr)
}

[软技能] 如何解决android键盘回落后留白问题？

在input上分别增加focus和blur的方法，基本可以解决键盘回落后留白问题；

handleFocus(event) {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
        });
    }, 300);
}
handleblur() {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
        });
    }, 300);
    window.scrollTo(0, 0);
}

转自 https://www.jianshu.com/p/8fe6a0a9971d