Zhengzhou NetEaseブランチのフロントエンドインタビューの質問(お金で購入することはできません)

1. clear:leftは具体的に何を指しますか?
  W3C標準の説明:ここに写真の説明を挿入
2。親要素に変換属性がある場合、子要素の「固定位置」は「絶対位置」に変換されます:
  {位置:固定;}→{位置:絶対;}
ここに写真の説明を挿入
3.要素が垂直方向に中央揃えされる方法:
      "ここをクリックしてください」
ここに写真の説明を挿入
4.BFCとは何ですか?
  BFC(ブロックフォーマットコンテキスト)は、文字通り「ブロックレベルのフォーマットコンテキスト」として翻訳されます。これは、ブロックのみが参加する独立したレンダリング領域であり、内部ブロックの配置方法を指定し、この領域の外側とは関係ありません。
block:表示属性がblock、list-item、tableである要素は、blockを生成します。

BFCレイアウトルール:
  1)内側のボックスは垂直方向に次々に配置されます
  。2)ボックスの垂直距離はマージンによって決定されます。同じBFCに属する2つの隣接するボックスのマージンが重なります
  。3)各要素のマージンボックスの左側が、ブロックを含む境界ボックスの左側に接触します(左から右へのフォーマット、それ以外の場合は反対)。これは、フロートがある場合でも当てはまります
  。4)BFC領域はフロートボックスとオーバーラップしません
  。5)BFCはページ上の分離された独立したコンテナであり、コンテナ内の子要素は外部要素に影響を与えません。逆もまた真です
  。6)BFCの高さを計算するとき、浮動要素も計算に参加します。

どの要素がBFCを生成しますか?
  1)<html> </ html>などのルート要素。
  2)float属性はnoneではありません;
  3)位置は絶対または固定です;
  4)表示はインラインブロック、テーブルセル、テーブルキャプション、フレックス、インラインフレックスです;
  5)オーバーフローは表示されません;

BFC機能:
  1)フローティング要素は親要素を支えることができません:
通常の状況では、親要素の高さは子要素によって支えられます。親要素に高さが設定されていない場合、その子要素はすべてフローティング要素になります。このとき、親要素の高さは折りたたまれ、上下の境界が表示されます。一致、つまり、浮動要素は親要素をサポートできません。このとき、BFCを使用してフロートをクリアし、親要素を全体としてBFC環境として設定できます。
ここに写真の説明を挿入
  2)フローティング要素でカバーされていない:
Divフローティングブラザーズカバー問題:左側のブロックレベル要素がフローティングであり、右側のブロックレベル要素が同じレイヤーにないため、divオクルージョンの問題が発生します。オーバーフローを追加できます:右側のブロックに非表示にして、bfcをトリガーしてオクルージョンの問題を解決します。
ここに写真の説明を挿入
  3)BFCはマージン崩壊の問題を解決します:マージン崩壊の問題
:標準のドキュメントフローでは、ブロックレベルのタグ間の垂直マージンが大きくなります。これはマージン崩壊の現象です。両方のパーティの親要素にオーバーフローを追加できます:hidden; BFCをトリガーして解決します。Bfcは、両側の親要素に追加された場合にのみトリガーできます。
ここに写真の説明を挿入
5.クライアントがPCかモバイルかを判断します。
ここに写真の説明を挿入
  定期的な検証:

var isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
if(isMobile){
    
    
	h1.innerHTML="手机用户您好!";
}else{
    
    
	h1.innerHTML="电脑用户您好!";
}

  タイプマッチ:

!function(){
    
    
    var flag = true;
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    for (var v = 0; v < Agents.length; v++) {
    
    
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
    
    
            flag = false;
            break;
        }
    }
    if(flag){
    
    
      h1.innerHTML="电脑用户您好!";
    }else{
    
    
      h1.innerHTML="手机用户您好!";
    }
}()

6. JSはどのようにしてイベントのバブリングを防ぎますか?
  JSイベントバブリングとは何ですか?
オブジェクトで特定のタイプのイベント(click onclickイベントなど)をトリガーします。オブジェクトがこのイベントのハンドラーを定義している場合、このイベントはこのハンドラーを呼び出します。このイベントハンドラーが定義されていないか、イベントがtrueを返す場合、このイベントは、処理されるまで(親オブジェクトの同様のイベントがすべてアクティブ化されるまで)、またはオブジェクト階層の最上位であるドキュメントオブジェクトに到達するまで(一部の参照)、このオブジェクトの親オブジェクトに内部から外部に伝播します。デバイスはウィンドウです)。
  1)event.stopPropagation();
イベント処理中、イベントのバブリングは防止されますが、デフォルトの動作は防止されません;
  2)falseを返します;
イベント処理中、イベントのバブリングは防止され、デフォルトの動作も防止されます;
  3) event.preventDefault();
イベント処理、イベントのバブリングは防止されませんが、デフォルトの動作は防止されます。7。JSを使用

してテーブルに行を挿入するにはどうすればよいですか?
ここに写真の説明を挿入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="添加行" onclick="add()">
    <table border="1" id="tab">
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </table>
</body>
<script>
    var j=1;
    function add(){
     
     
        var tableobj =document.getElementById("tab");
        var trobj =document.createElement("tr");
        var tdobj = document.createElement("td");
        for(var i=0;i<4;i++)
        {
     
     
            var tdobj=document.createElement("td");
            tdobj.innerHTML=j++;
            trobj.appendChild(tdobj);
        }
        trobj.appendChild(tdobj);
        tableobj.appendChild(trobj);
    }
</script>
</html>


  その日、インタビュアーからたくさんの質問がありましたが、カテゴリー別に整理して前半をここに入れ、後半は主流のフレームワークとハイエンドの最適化を盛り込んで整理して共有します。このコンテンツをブックマークして、紛失を防ぐことができます。

ここに写真の説明を挿入  フロントエンドの学習は一夜にして行われるわけではありません。ステップを踏まなければ、何千マイルにも到達する方法はありません。継続的な努力によってのみ、あなたと私は何かを得ることができます。専門的な知識は依然として機関によって学ぶことができます。訓練機関の設立には必然性があります。あなたはお金を正しく使っていますか?

推奨読書:

  この記事がお役に立てば、私の一番上の記事をチェックしてください、ありがとう!あなたの研究が順調に進み、あなたのキャリアが繁栄するように。

おすすめ

転載: blog.csdn.net/weixin_45820444/article/details/109270995