CSS での display:none と Visibility:hidden の違いの分析

この記事の内容はCSSにおけるdisplay:noneとvisibility:hiddenの違いについての分析です。必要な方は参考にしていただければ幸いです。

面接中に「display:noneとvisibility:hiddenの違いを教えてください」と聞かれたことをまだ覚えていますか? display:none は元の位置を占有せず、visibility:hidden は元の位置を保持すると答えた後、インタビュアーは笑顔になるでしょうか?実際にはそれ以上です！この記事では、次のインタビューでより良い答えができるように、彼らの不満や憤りを一緒に掘り下げていきます。

詳細なdisplay:none

要素がdisplay:noneに設定されている場合、その要素はインターフェースに表示されないことは誰もが知っています。要素はレイアウト スペースを占有しませんが、JavaScript を通じて要素を操作することはできます。しかし、なぜそうなるのでしょうか？
これにはブラウザのレンダリング原理が関係します。ブラウザは HTML タグを解析して DOM を生成します。 ツリー、CSS を解析して CSSOM を生成し、DOM ツリーと CSSOM を合成してレンダー ツリー、レンダーの要素を生成します。 ツリーは 0 個以上のボックスに対応し、ブラウザはボックス モデルの情報を使用してインターフェイスをレイアウトおよびレンダリングします。 display:none に設定された要素は、レンダー ツリー内で対応するボックス モデルを生成しないため、その後のレイアウトやレンダリング作業は、当然のことながら、DOM 操作とは関係ありません。
ただし、上記の知識ポイントに加えて、次の 8 つの点に注意する必要があります。
1. ネイティブのデフォルト表示を持つ要素: なし
実際、多くのネイティブ ブラウザー要素には表示があります。 :none リンク、スクリプト、スタイル、ダイアログ、入力 [type=hidden] などの要素。

2. HTML5 に非表示のブール属性が追加され、開発者が要素の非表示をカスタマイズできるようになります

/* 兼容原生不支持hidden属性的浏览器  */
[hidden]{
  display: none;
}
<span>Hide and Seek: You can't see me!</span>

3。親要素は display:none であり、子孫要素はエスケープできません。

.hidden{
  display: none;
}
.visible{
  display: block;
}

*** START ***
<div>
  I'm parent!
  <div> I'm son! </div>
</div>
*** END ***

ブラウザはそれを

*** START ***
*** END ***

4 として直接表示します。もともとボックスはありません。フォーカスはどこにありますか? ^_^ Tab キーを使用しても、キャプチャー、ターゲット、またはターゲットに反応することはできません。バブリングステージ
表示のため:none この要素はインターフェイス上でまったくレンダリングされず、1 ピクセルも占有しないため、当然のことながらマウスクリックでヒットすることはできず、要素はフォーカスを取得できないため、実行できませんキーボード イベントのターゲットであり、親要素の表示が none の場合、子要素の表示は none である必要があるため、要素はイベント キャプチャまたはバブリング ステージのパス上に存在する可能性がありません。 display:none を持つ要素はイベントに応答できません。

6. フォームの送信データを遅らせないでください。
display:none 要素は表示されませんが、フォームが送信されると、非表示の input 要素の値が送信されます。

<!-- 真心不会获得焦点 -->
<input>
<div>hidden</div>

7。CSS のカウンターは
display:none

     

の要素を無視します。結果は次のようになります:

.start{
  counter-reset: son 0;
}
.son{
  counter-increment: son 1;
}
.son::before{
  content: counter(son) ". ";
}

<div>
  <div>son1</div>
  <div>son2</div>
  <div>son3</div>
</div>

8.Transition は次のように変わります。 display 風邪をひかないでください

9。表示が変更されるとリフローがトリガーされます
display:none はさておき、display:block は要素が BFC にあることを意味することを見てみましょう。 display:inline は、要素が IFC に配置されていることを意味します。つまり、表示の目的は、要素が属するレイアウト コンテキストを設定することです。表示値が変更された場合、その要素で採用されているレイアウト メソッドが変更されたことを意味します。リフローが発生しないのはおかしいでしょう。

詳細な可視性

可視性には 2 つの異なる機能があります

テーブルの行と列を非表示にするために使用されます

トリガーなしで使用されますレイアウト 隠し要素

4 有効な値

1.visible

何も言うことはなく、インターフェイスに表示されるだけです。

2.hidden

要素を画面上で非表示にしますが、要素の元の位置は保持します。
3.collapse
table サブ要素 (tr、tbody、col、colgroup など) で使用した場合の効果は、display:none と同じです。他の要素で使用した場合、効果は同じです。可視性:非表示。ただし、ブラウザごとに実装効果が異なるため、通常はこの値は使用されません。
4.inherit
親要素の可視性の値を継承します。

display:noneとvisibility:hiddenを明確に比較

上記ではdisplay:noneの注目ポイントを8つ挙げましたので、それを比較して可視性を1つずつ列挙するだけで済みます。まだはっきりと見えますか？

1. 親要素はvisibility:hiddenであり、子要素をvisible:visibleに設定すると有効になります。

1. son1
2. son3

結果:

2. display:none のようにフォーカスを取得できません。

3. 要素の子要素が可視性に設定されているため、次のようになります。 hidden は、visible:visible であり、hidden です。要素はバブリングイベントのパス上にある可能性があります。したがって、次のコードでは、マウスを .visible に移動すると、ホバーイベントに応じて .hidden が表示されます。 。

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
<div>
  I'm Parent.
  <div>
    I'm Son.
  </div>
</div>

4.display:none と同様、フォームの送信を妨げません

#5.CSS のカウンターは無視されません
#6.トランジションは有効です可視性の変更について

7. 可視性の変更はリフローをトリガーしません

要素のレイアウトに関連する属性は、表示から非表示に設定されても変更されないため、リフローはトリガーされません。コントローラーは、他のレンダリング変更によるブラウジングをただ静かに待ちます。インターフェースは定期的に再描画されます。

以上がCSS での display:none と Visibility:hidden の違いの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。