何も表示しないとはどういう意味ですか?表示なしの使用例-CSSチュートリアル-php.cn

何も表示しないとはどういう意味ですか?表示なしの使用例

不言

リリース： 2018-10-23 14:58:49

オリジナル

65498 人が閲覧しました

cssのdisplay属性はWebページのレイアウトでよく使われますが、特にdisplay属性のblock、inline-block、inline、noneの4つの属性値について紹介します。 need は、display 属性の none 属性値の使用法を参照できます。

ps: css 表示属性の関連知識の簡単な紹介については、css 表示属性とは何を意味しますか? を参照してください。 cssの表示属性について詳しく解説します。

まず、display none の意味を見てみましょう。

display:none の意味:

要素を非表示にして文書から切り離すという流れで、領域を非表示にし占有しません。正直に言うと、要素が none に設定されている場合、要素はスペースを占有することも表示されることもありません。これは要素が存在しないことと同じです。。

display noneの意味を読んだあとは、display noneの使い方を見てみましょう。

display none の使用法:

display:none の例を直接見てみましょう:

<html>
<head>
<title></title>
<style type="text/css">
    div{
        background: lightblue;
        width: 200px;
        height: 200px;
    }
    span{
        background: pink;
        display: none;
    }
</style>
</head>
<body >
    <div><span>需要隐藏的区域</span></div>
</body>
</html>

ログイン後にコピー

上記のコードでは、display:none 属性値を設定します。その効果は次のとおりです。

何も表示しないとはどういう意味ですか?表示なしの使用例

display:none 属性値が設定されている場合、効果は次のようになります。次の図: 非表示にする必要がある領域が非表示になりました。

何も表示しないとはどういう意味ですか?表示なしの使用例

display:none を使用するときに注意する必要があるのは、

1 スタイルファイルを使用する場合です。または

2. display:none を直接使用してスタイルファイルまたはページファイルコード内の要素を非表示にする場合、ページを読み込んだ後、要素を表示するために js を通じてスタイルを設定せずに、js コードを使用すると一部の属性が表示されます。 offSetTop、offSetLeft などの要素の要素が正しく取得できません。戻り値は 0 になります。これらの値は、js で style.display を設定して要素を表示した後でのみ正しく取得できます。

以上が何も表示しないとはどういう意味ですか?表示なしの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。