CSS 要素の非表示の原則と display:none および visibility:hidden

CSS 要素の非表示の原則と display:none および visibility:hidden
1. CSS 要素の非表示<br />CSS では、要素を非表示にする (つまり、画面の範囲内で肉眼で見えないようにする) 方法が多数あります。要素の中にはスペースを占有するものもあれば、占有しないものもあり、クリックに反応するものもあれば、反応しないものもあります。一つずつ見てみましょう。

コードをコピー
コードは次のとおりです。

{ display: none; /* スペースを占有せず、クリックできません*/ }
/****************************************************************************************/
{ visibility: hidden; /* スペースを占有し、クリックできません */ }
/****************************************************************************************/
{ position: absolute; top: -999em; /* スペースを占有しないのでクリックできません*/ }
/****************************************************************************************/
{ position: relative; top: -999em; /* スペースを占有するため、クリックできません*/ }
/****************************************************************************************/
{ position: absolute; visibility: hidden; /* スペースを占有せず、クリックできません*/ }
/****************************************************************************************/
{ height: 0; overflow: hidden; /* スペースを占有せず、クリックできません */ }
/****************************************************************************************/
{ opacity: 0; filter:Alpha(opacity=0); /* スペースを占有し、クリック可能 */ }
/****************************************************************************************/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* スペースを占有せず、クリック可能 */ }
/****************************************************************************************/
{
ズーム: 0.001;
-moz-transform: スケール(0);
-webkit-transform: スケール(0);
-o-変換: スケール(0);
変換: スケール(0);
/* IE6/IE7/IE9 はスペースを占有しませんが、IE8/FireFox/Chrome/Opera は占有します。クリックできません*/
}
/****************************************************************************************/
{
位置: 絶対;
ズーム: 0.001;
-moz-transform: スケール(0);
-webkit-transform: スケール(0);
-o-変換: スケール(0);
変換: スケール(0);
/* スペースを占有せず、クリックできません */
}

2. display:none と visibility:hidden
現時点では、3 つの違いがわかっています (追加歓迎):
1. スペース占有
2. リフローとレンダリング
3. 関与
display:none で非表示にするとリフローと再描画が発生しますが、 visibility:hidden ではフロントエンドのパフォーマンスに影響するこの問題は発生しません。3 番目のポイントは、おそらく多くの同僚には知られていないでしょうが、「関連付け」の違いです。
いわゆる「集団懲罰」とは、先祖が災害に遭遇すると、その子孫全員が例外なく苦しむことを意味する。 display:none は「連鎖責任」を明確に示しています。親要素に display:none が適用されると、親要素とその子孫要素はすべて見えなくなり、子孫要素がどれだけ努力しても無駄になります。
実際の Web アプリケーションでは、表示機能と非表示機能を実装する必要があることがよくあります。display:none 自体の特性と jQuery の潜在的なドライバーにより、display:none の非表示機能はよく知られています。したがって、時間が経つにつれて、比較的堅固な感情的な理解が形成され、この理解は必然的に他の同様のパフォーマンス属性 (可視性など) の理解と、従来の経験に移行します...
たとえば、通常、親要素に visibility:hidden を適用すると、そのすべての子孫も非表示になります。したがって、同様の理解の変化が起こります。 visibility:hidden 宣言を持つ子孫要素がどれだけ苦労しても、見えなくなり消滅するという運命から逃れることはできません。しかし、現実には隠れた「失敗」が存在します。
「有効期限」を非表示にするのはいつですか?とても簡単です。子孫要素に visibility:visible を適用すると、子孫要素は Liu Qian のように表示されます。

可視性というのは実に面白い属性です。
比較の概要:
display:none はかなり非人道的な発言です。将来の世代全員が殺され(集団懲罰)、埋葬する場所さえ残されず(空きスペースがなくなる)、世論の騒動を引き起こすことになるからです(誇張と逆流)。
visibility:hidden は人道的な関心を示します。子孫は殺されなければなりませんが、特定の手段でそれを回避できます (疑似犯罪)。さらに、死後も遺体はそのまま残り、墓地は完成します (スペースを占有します)。国内の人々は比較的無関心です (誇張や逆流はありません)。

<<:  JavaScript 関数の高度な説明

>>:  MySQL構成SSL証明書ログインの実装

推薦する

Dockerでイメージをプルするための手順を完了する

1. Docker pullはイメージをプルします$ docker pull {IMAGE_NAME...

プロジェクトに必須の 8 つの JavaScript コード スニペット

目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...

vscodeカスタムvueテンプレートの実装

vscode エディタを使用して vue テンプレートを作成すると、新しい vue ファイルを作成す...

React 合成イベントの説明

目次入力ボックスをクリックして開始します拡張機能入力ボックスをクリックすると複数のイベントが発生しま...

DockerコンテナのライフサイクルアーキテクチャとVMとの違いについて詳しく説明します。

コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...

Helloダイアログボックスのデザイン体験の共有

「どうしたの?」特定の種類のダイアログ ボックスに慣れていない限り、ダイアログ ボックスが表示された...

Vueシャトルボックスは上下の動きを実現します

この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

MySQLの再帰問題

MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...

jQuery における Ajax の関連知識ポイントのまとめ

序文JavaScriptを学ぶ学生は、 AJAX (非同期JavaScriptとxml) 変換は非同...

MySQL 5.7 で業務を停止せずに従来のレプリケーションを GTID レプリケーションに変更する例

GTID の利点により、従来のファイル POS ベースのレプリケーションを GTID ベースのレプリ...

Linux で Bash 環境変数を設定する方法

Shell は C 言語で書かれたプログラムであり、ユーザーが Linux を使用するための橋渡しと...

知らないかもしれないLinuxのファイル権限管理方法

なぜ権限管理が必要なのでしょうか? 1. コンピュータ リソースは限られているため、コンピュータ リ...

JavaScript オブジェクトを比較する 4 つの方法

目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...

Vueページの初回読み込み最適化の全プロセス

目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...