ホームページ >ウェブフロントエンド >htmlチュートリアル >display:none と Visibility:hidden の使用の違いは何ですか?
display:none と Visibility:hidden の使用の違いは何ですか?
- 零下一度オリジナル
- 2017-06-24 14:03:152295ブラウズ
今日卒業設計をしているときに小さな問題に遭遇しました。タブ ナビゲーション バーを作成しました。このとき、最初のアイデアは、display: none を使用して表示を制御することです。書いた後、displayを使用すると問題があることがわかりました。つまり、2番目のタブページのカルーセル画像は、ページをレンダリングするときに2番目のタブページ内の要素の幅を取得してアダプティブを作成する必要があります。効果は非表示になっているので、カルーセルが発生し、画像の高さも0になります。その後、display:noneをvisibility:hiddenに変更すると、正常に表示および再生できるようになります。
display:none と Visibility:hidden の違いは次のとおりです。
1. display:none は完全に消え、ドキュメント フロー内の場所を占有しません。また、visibility:hidden は要素を視覚的に解析しません。透明度が 0 であることがわかります。これはドキュメント フロー内の場所を占め、ブラウザーは要素を解析します。2. display:none の場合、visibility:hidden を使用する方がパフォーマンスの点で優れています。可視性を切り替えると、ページは元に戻ります (ページ内の一部の要素のサイズ、レイアウト、表示、非表示などを変更する必要がある場合、ページは再構築されます。これはリフローです (すべてのページは、変更時にリフローを生成する必要があります)初回ロード時）、表示/非表示が切り替わってもリフローは発生しません。
そこで、visibility: hidden を使用すると、2 番目のタブ ページのカルーセル画像が幅を取得して、ページがレンダリングされるときにそれを適応させることができます。
以上がdisplay:none と Visibility:hidden の使用の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。