表示と視認性の違い

今回は、displayとvisibilityの違いと、displayとvisibilityを使用する際の注意事項についてお届けします。実際のケースを見てみましょう。

可視性 非表示のオブジェクトも、表示時にオブジェクトが占有する物理スペースを保持しますが、表示は保持しません。

vilibility: hidden(非表示)、visible(display) style="vislbility:hidden"

display: none(hidden)、block(display) style="display:none"

保存できますコードの下にそれを追加して、効果を確認します。

具体的な手順:

コード例:

< p style="border:1px solid #000;background:#eee">
< span style="width:200;height:200;visibility:hidden"></span>
←SS属性为visibility:hidden的对象
< /p><br>
< p style="border:1px solid #000;background:#666">
< span style="width:200;height:200;display:none"></span>
←SS属性为display:none的对象
< /p>

特別なヒント

visibility 属性を使用して非表示のオブジェクトを制御し、表示されたときにその位置を占有しますが、表示はされません。

特記事項

対応するスクリプト機能は、display 属性であり、オプションの値は、次のとおりです。

none は要素を非表示にし、スペースが表示されるときに要素を保持しません。

ブロックモードで要素を表示します。

inline は要素をインラインで表示します。

inline-block オブジェクトはインライン要素として表示されますが、すべての子オブジェクトはブロック要素として表示され、隣接するインライン要素は同じ行に表示されます。スペースは許可されます。

list-item は、ブロック要素をリスト オブジェクトとして表示し、項目に句読点を追加できます。 (IE6.0+ のサポートが必要)

table-header-group は、要素を tHead 要素と同等の

tableheader グループとして表示します。

table-footer-group は、要素を tFoot 要素と同等のテーブル フッター グループとして表示します。

visibility 属性は、要素を表示するかどうかを設定します。対応するスクリプト機能は、inherit、hidden、visible です。各値の説明は次のとおりです。親要素の設定。

hidden 要素を非表示にしますが、要素が占有するスペースは保持します。

表示要素 (デフォルト値)。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

リップルアニメーションを作成するためのCSSでのbackground-attachmentの使用の詳細な説明

css

以上が表示と視認性の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。