2020-09-03 HTML Webサイトのクイックダウンロードテンプレート+ CSSグリッドレイアウトとフレックスレイアウト+ JSプロキシconsole.logメソッド+ソフトスキルAndroidキーボードの背面と空白

2020-09-03トピックのソース：http://www.h-camel.com/index.html

[html]こちらが参考サイトです。テンプレートをすぐにダウンロードできますか？どのような方法が使用されていますか？

ブラウザーでWebページのソースコードを表示しますが、これは構造とレイアウトの参照を提供するだけであり、実際のフレームワークを自分で検討する必要があります。

テンプレートWebサイトにアクセスして、ダウンロードして変更する同様のデモを見つけることをお勧めします。

[css]グリッドレイアウトとフレックスレイアウトの違いは何ですか？

Flexは1次元レイアウトに使用され、gridは2次元レイアウトに使用されます。

1. flex子要素自体が配置方法を決定し、親要素の表示を設定するだけです：flex;要素を右に適応させるには、マージン左：auto;

2.グリッドは最初に列と列の幅を定義してから、対応するセルでコンテンツが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キーボードの背後にある空白の問題を解決するにはどうすればよいですか？

入力にフォーカスメソッドとぼかしメソッドを追加すると、基本的にキーボードの背後のブランキングの問題を解決できます。

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から転送