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 は人道的な関心を示します。子孫は殺されなければなりませんが、特定の手段でそれを回避できます (疑似犯罪)。さらに、死後も遺体はそのまま残り、墓地は完成します (スペースを占有します)。国内の人々は比較的無関心です (誇張や逆流はありません)。 |
1. Docker pullはイメージをプルします$ docker pull {IMAGE_NAME...
目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...
vscode エディタを使用して vue テンプレートを作成すると、新しい vue ファイルを作成す...
目次入力ボックスをクリックして開始します拡張機能入力ボックスをクリックすると複数のイベントが発生しま...
コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...
「どうしたの?」特定の種類のダイアログ ボックスに慣れていない限り、ダイアログ ボックスが表示された...
この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...
導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...
MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...
序文JavaScriptを学ぶ学生は、 AJAX (非同期JavaScriptとxml) 変換は非同...
GTID の利点により、従来のファイル POS ベースのレプリケーションを GTID ベースのレプリ...
Shell は C 言語で書かれたプログラムであり、ユーザーが Linux を使用するための橋渡しと...
なぜ権限管理が必要なのでしょうか? 1. コンピュータ リソースは限られているため、コンピュータ リ...
目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...
目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...