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. 古い仮想DOMと新しい仮想DOMを比較し、まずキーが同じかどうかを確認します。 2. 引き続...
現在、プロジェクトを作成しました。インターフェースは次のとおりです。これはフレームセットを使用して行...
最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...
目次導入効果のデモンストレーションは次のとおりです。 MChat コンポーネントのレンダリング: I...
MySQL をインストールした後、初めてmysql -uroot -pを実行したときに、root パ...
まず、in() クエリについて説明します。 「High Performance MySQL」では、イ...
目次1. 透かしのJsファイルを作成する2. 導入操作2.1 App.vueや他のページでの参照2....
<br />質問: Word のコンテンツを Web サイトのエディターに直接コピーする...
カウントスクリプト #!/bin/sh 引数の数=$# [ $numOfArgs -ne 1 ]の場...
序文最近、友人がSQLを書くときにnull値を判定する方法が間違っていて、プログラム内のデータにエラ...
目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...
目次導入インデックスの原則1. データページ2. ページディレクトリ3. インデックス原則分析要約す...
1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...
LOFTER のコンテストで、ログイン ボックスを再設計できると言及されているのを見ました。過去 2...
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...