ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS の表示と可視性_html/css_WEB-ITnose

CSS の表示と可視性_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:29:21
オリジナル
1866 人が閲覧しました

要素を表示するかどうかを設定する方法 Visibility 属性は、要素を表示するか非表示にするかを指定します。

要素を非表示にする - display:none または Visibility:hidden

display 属性の可視性を「none」または「hidden」に設定して、要素を非表示にします。ただし、これら 2 つの方法では異なる結果が生成されることに注意してください

visibility:hidden を使用すると要素を非表示にできますが、以前と同じスペースが必要になります。要素は非表示になりますが、レイアウトには影響します。

h1.hidden {visibility:hidden;}
ログイン後にコピー

display: 隠れた要素はなく、スペースも取りません。要素は非表示になりますが、ページは表示されます:

h1.hidden {display:none;}
ログイン後にコピー

CSS 表示 - ブロック要素とインライン要素

ブロック要素は、前後に改行があり、全幅を占める要素です。

ブロック要素の例:

インライン要素には必要な幅のみが必要であり、改行は強制されません。

インライン要素の例:

要素の表示を変更する方法

インライン要素とブロック要素を変更でき、またその逆も可能ページは特定の方法でまとめられているように見えますが、Web 標準に準拠しています。

次の例は、リスト項目をインライン要素として表示します:

li {display:inline;}
ログイン後にコピー

次の例は、span 要素をブロック要素として表示します

span {display:block;}
ログイン後にコピー

注: 要素がどのように表示され、どのように表示されるかを確認するには、要素の表示タイプを変更します。要素はどのように見えるか。たとえば、display:block に設定されたインライン要素の内部にネストされたブロック要素を含めることはできません。 .

その他の例

要素をインラインで表示する方法。

この例は、要素をインラインで表示する方法を示します。

要素のブロック要素を表示する方法。

この例は、要素のブロック要素を表示する方法を示します。

テーブルの折りたたみ属性の使用方法

この例は、テーブルの折りたたみ属性の使用方法を示します


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート