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