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証明書ログインの実装

推薦する

React でインデックスをキーとして使用することが推奨されないのはなぜですか?

1. 古い仮想DOMと新しい仮想DOMを比較し、まずキーが同じかどうかを確認します。 2. 引き続...

フレームセットの高さを設定する際のインターフェース変形の解決策

現在、プロジェクトを作成しました。インターフェースは次のとおりです。これはフレームセットを使用して行...

Win10 での MySQL 8.0 ログインでユーザー 'root'@'localhost' のアクセスが拒否される (パスワード使用: YES) 問題の解決方法

最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...

vue.js ベースの QQ チャット ルーム

目次導入効果のデモンストレーションは次のとおりです。 MChat コンポーネントのレンダリング: I...

MySQL SQL 最適化チュートリアル: IN クエリと RANGE クエリ

まず、in() クエリについて説明します。 「High Performance MySQL」では、イ...

Vue のグローバル ウォーターマーク実装例

目次1. 透かしのJsファイルを作成する2. 導入操作2.1 App.vueや他のページでの参照2....

Word のコンテンツを Web サイトのエディターに直接コピーすることはお勧めしません。

<br />質問: Word のコンテンツを Web サイトのエディターに直接コピーする...

Linux で指定されたフォルダの各サブフォルダ内のファイル数を表示する

カウントスクリプト #!/bin/sh 引数の数=$# [ $numOfArgs -ne 1 ]の場...

MySQLの空の値とnull値の違いを知っていますか?

序文最近、友人がSQLを書くときにnull値を判定する方法が間違っていて、プログラム内のデータにエラ...

MySQL Undo ログと Redo ログの概要

目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...

MySQL データベース インデックスの面接の質問 (基本的なプログラマー スキル)

目次導入インデックスの原則1. データページ2. ページディレクトリ3. インデックス原則分析要約す...

MySQL mysqldump の使い方の詳しい説明

1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...

163 メールボックスログインボックスインタラクティブデザインの改善体験と共有

LOFTER のコンテストで、ログイン ボックスを再設計できると言及されているのを見ました。過去 2...

HTML ハイパーリンク スタイル (4 つの異なる状態) の設定例

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...