2018 年の最新のフロントエンド面接の質問 11

今回は、2018 年の最新のフロントエンド面接の質問をお届けします。フロントエンドの仕事に面接が不可欠な部分であることはわかっています。このフロントエンド面接のよくある質問の分類と要約の目的は、面接での質問を克服できるようにすることです。フロントエンド面接における大きな困難。見てみましょう。

[関連する推奨事項: フロントエンド面接の質問 (2020)]

1. Z インデックスとオーバーレイ コンテキストがどのように形成されるかを説明します。

まず、CSS でオーバーレイ コンテキストが形成される理由を見てみましょう:

1. 負のマージン マージンが負の値の場合、要素は基準線に従って外側にオフセットされます。 margin-left/margin-topの基準線は左の要素/上の要素(兄弟要素がない場合は親要素の左内側/上の内側)、の基準線はmargin-right と margin-bottom 線は、要素自体の境界線の右側/境界線の下側です。一般に、負のマージンをレイアウトに使用できますが、適切に計算されていない場合、要素が重なる可能性があります。積み重ね順序はドキュメント内の要素の位置によって決まり、要素が後から上に表示されます。

2. 位置の相対/絶対/固定配置 要素の位置値が相対/絶対/固定に設定されている場合、要素のオフセットが重なる可能性があり、z-index 属性が有効になります。 Z インデックス値は、表示画面 (Z 軸) に垂直な方向での配置された要素の重なり順を制御できます。値が大きい要素が重なると、値が小さい要素の上に配置されます。

z-index 属性 z-index は、position 属性値が相対、絶対、または固定である要素に対してのみ有効です。

基本原理: Z インデックス値は、表示画面 (Z 軸) に垂直な方向での配置された要素の重なり順を制御できます。大きな値を持つ要素が重なると、小さな値を持つ要素の上に配置されます。 。

相対性理論を使用する: Z インデックス値は、同じ親要素内の兄弟子要素の重なり順のみを決定します。親要素 (存在する場合) の z-index 値は、子要素のスタック順序 (CSS バージョンのスタック「ピン ダッド」) を定義します。

上方向にトレースしたときに z-index 値を含む親要素が見つからない場合、その要素は自由な z-index 要素とみなされ、親要素の兄弟の位置要素または他の自由な位置要素と比較できます。 -index の重なり順が決まります。兄弟要素の z-index 値が同じ場合、重なり順はドキュメント内の要素の位置によって決まり、後から現れる要素が一番上になります。したがって、大きい z-index 値を持つ要素が小さい値を持つ要素によって隠されていることがわかった場合は、まずそれらの間の dom ノード間の関係を確認してください。おそらく、その親ノードにアクティベーションと z-index が設定されていることが原因です。 . 値の位置によって要素が配置されます。

2. BFC (ブロック フォーマット コンテキスト) とその仕組みについて説明してください。

BFC (Block Formatting Context) は、文字通り「ブロックレベルの書式設定スコープ」と訳されます。

3. さまざまなフロートのクリアテクニックをリストし、それらの適用可能な使用シナリオを指摘します。

まず、フロートをクリアする必要がある理由を説明しましょう。 コンテナ内のすべての要素がフローティングされている場合、フローティングにより通常のドキュメント フローから要素が分離されるため、外側のコンテナに対して開いたままにするコンテンツがなくなり、背景設定やマージン設定が表示されなくなります。 。 フロートをクリアする方法:

1. 新しい要素を追加してクリアを適用します:

例如： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div>
.clear{clear:both; height: 0; line-height: 0; font-size: 0}

利点: シンプル、コードが少ない、ブラウザのサポートが優れている、欠点は、多くの無効なレイアウトを追加する必要があることです。 、しかし、これはフロートをクリアするためにより一般的に使用される方法です。

2. 親 div はオーバーフローを定義します: 自動または非表示

//这里添加了一个class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 }

原則: 幅またはズーム: 1 を定義する必要があり、高さは定義できません。 float をクリアする 注意すべき点の 1 つは、overflow 属性には、hidden、auto、visible の 3 つの属性値があることです。非表示値と自動値を使用して浮動小数点をクリアできますが、この値を使用すると、浮動小数点をクリアする効果が得られないので注意してください。

長所: シンプル、コードが少ない、優れたブラウザサポート短所: auto を使用すると、内部の幅と高さが親 div を超えるとスクロール バーが表示され、hidden を使用すると非表示になります

3. 原則after メソッド::after と :before を使用して、要素 内に 2 つの要素ブロックを挿入し、float をクリアする効果を実現します。実装原理は、clear:both メソッドと似ていますが、違いは、:clear が HTML に div.clear タグを挿入するのに対し、このメソッドは疑似クラスの clear:after を使用して、div.clear と同様の効果を HTML 内に追加することです。要素。

具体的な使い方を見てみましょう:

<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

ここで、clear:both; はすべての float をクリアすることを指します。値を取得することも、空にすることもできます。 Visibility:hidden; の機能は、ブラウザがそれを表示するだけでレンダリングできるようにして、フロートをクリアできるようにすることです。 したがって、一般的には、疑似クラス メソッドを使用することをお勧めします。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

2018 年の最新のフロントエンド インタビューの質問 10

2018 年の最新のフロントエンド インタビューの質問 9

2018 年の最新のフロントエンド インタビューの質問 8

以上が2018 年の最新のフロントエンド面接の質問 11の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。