宿題ヘルプのフロントエンドチュートリアルを模倣する

ボックスモデル

標準モードの場合

box = margin+border+padding+content(width/height)

奇妙なモードの場合

box = margin+content(border+padding+width/height)

モバイルデバイスの適応

フレックスボックス
レム
詳細は後で追加

位置

相対: テキスト内のそれ自体の位置絶対: 親要素内の非静的に配置された要素に相対的に配置され、配置後にテキスト フローから切り離されます。
静的: 通常のテキスト フロー レンダリング

イベント プロキシの利点

原理はイベント バブリングを使用することです

利点

メモリ使用量が多くなり、イベント登録が減少します。たとえば、ul は li のすべてのクリック イベントをプロキシします。 特に動的コンテンツに適しています

欠点

イベントプロキシの一般的な適用は上記の要件に限定する必要があります。すべてのイベントにイベントプロキシが使用される場合、イベントの誤判定が発生する可能性があります。つまり、トリガーすべきではないイベントがイベントにバインドされます。 配列重複排除

<style>
    .p1{        
    width:100px;        
    height:100px;        
    background-color:red;        
    left:20px;        /*以下两张图分别展示*/
        position:relative;        
        position:absolute;    }
    .p2{        
    width:100px;        
    height:100px;        
    background-color:blue;    }
</style>
    <p class=&#39;p1&#39;></p>
    <p class=&#39;p2&#39;></p>

indexOfを使用できず、要素タイプを考慮する必要がある場合

function f(arr){
    var s = [];    
    for(var i = 0;i<arr.length;i++){
        if(s.indexOf(arr[i]) == -1){
            s.push(arr[i]);
        }
    }    return s;
}

、またはES6のSet

function f(arr){
    var s = {};    
    for(var i = 0;i<arr.length;i++){
        var type = typeof arr[i];
        var con = type+arr[i];
        if(!s[con]){
            s[con] = 1;
        }else{
            arr.splice(i,1);
            i--;
        }
    }    return arr;
}

を直接使用してマウスオーバーアバター表示の導入を実装します

重要なポイント:

1.バインドイベント

私が望むのは、イベントプロキシを使用することです

2. 配置を確実に表示し、素早くスワイプしたときに表示されないようにする方法
タイマーの使用

簡単なコードを使用して例を示してみましょう。 。 。
りー

以上が宿題ヘルプのフロントエンドチュートリアルを模倣するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。