検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSの表示属性の値は何ですか?

CSSの表示属性の値は何ですか?

青灯夜游
青灯夜游オリジナル
2022-09-06 16:28:378151ブラウズ

display 属性の値は次のとおりです: 1. none (要素を非表示にすることができます)、2. block (要素をブロックレベルの要素として設定できること)、3. inline (要素を設定できること)要素をインライン要素として設定できます; 4. inline-block、要素をインライン ブロック要素として設定できます; 5. table、要素をブロック要素レベルのテーブルとして設定できます; 6. table-cell、要素をテーブルのセルとして設定; 7. table-row、要素をテーブルのセルとして設定できます要素はテーブルの行に設定されます; 8. flex、オブジェクトをフレキシブルボックスに設定できます。

CSSの表示属性の値は何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

表示属性は、要素が生成するボックスのタイプを指定します。

display 属性は、要素とそのサブ要素の書式設定コンテキストを制御できます。初めて CSS を学習するときは、一部の要素はブロック レベルの要素であり、一部の要素はインライン要素であることを知っておく必要があります。

display 属性を使用すると、要素のさまざまな状態を切り替えることができます。たとえば、通常、h1要素はブロックレベルの要素ですが、これを切り替えることでインライン要素として表示できます。

#表示属性の値

値説明none要素を非表示にするblock要素をブロックレベルの要素として設定する #inlinelist-iteminline-blocktable
要素をインライン要素として設定します
要素をリスト項目として設定します
要素をインライン ブロック要素として設定します
要素をブロック要素レベルとして設定しますtable (
inline-table
と同様)
要素をインライン要素レベルのテーブルに設定します (# と同様) ##) table-caption 要素を表のタイトルに設定します ()table-cell 要素をテーブルのセルに設定します ( および ## と同様) #要素をテーブルの行に設定します (# と同様) ##) と同様)##table-column と同様)inline-box新しい属性値CSS3 では、オブジェクトがインライン要素レベルのエラスティック ボックス (最も古いバージョンのエラスティック ボックス) に設定されていることを示します。flexbox の新しいプロパティ値CSS3 は、オブジェクトをフレキシブル ボックス (フレキシブル ボックスの移行バージョン) として設定することを意味しますinline-flexboxCSS3 の新しい属性値は、オブジェクトを次のように設定することを意味しますインライン要素レベルのエラスティック ボックス (エラスティック ボックスの移行バージョン)flexCSS3 の新しい属性値は、オブジェクトを伸縮可能な伸縮ボックスとして設定することを意味します(格納式ボックスの最新バージョン) inline-flexCSS3 の新しい属性値は、オブジェクトをインライン要素レベルのエラスティック ボックス (最新バージョンのエラスティック ボックス)コンテキストに基づいて要素をブロック レベル要素として設定するかインライン要素として設定するかを決定します#inherit表示属性の値を親要素から継承します
 と同様)。
)table-row
##table -row-group 要素をテーブルのコンテンツ部分に設定します (
要素をテーブルの列に設定します (
##table-column-group 要素をテーブルに設定します。1 つ以上の列をグループ化します (<colgroup></colgroup> と同様)
table-header-group 要素をテーブル ヘッダーに設定します (<thead> と同様) <tr> <td>table-footer -group</td> <td> 要素をテーブルのフッターに設定します (<code> <tfoot> と同様)<tr>##box<td></td>A CSS3 の新しい属性値。オブジェクトがフレキシブル ボックス (フレキシブル ボックスの最も古いバージョン) に設定されていることを示します。<td><code>
##run-in
#

テレスコピック ボックス (フレキシブル ボックス) は、CSS3 の新しいレイアウト モードです。フレキシブル ボックスを導入する目的は、ページ上の要素のスペースを配置、配置、割り当てするためのより効果的な方法を提供することです。このメソッドにより、ページをさまざまな画面サイズやデバイス タイプに適応させる必要がある場合に、要素のサイズと位置が適切に配置されます。

以下では、一般的に使用されるいくつかの属性値を使用して、次の表示属性の使用方法を紹介します:

<span style="font-size: 16px;"><strong>display: none </strong></span>

display 属性値 none は、要素を非表示にするために使用できます。これは、visibility: hidden; と似ています。違いは、display: none; 要素を非表示にすると、その要素が占める位置も非表示になります。 display: none;これは通常、要素を非表示または表示するために JavaScript と組み合わせて使用​​されます。以下に例を示します: 

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 350px;
            height: 100px;
            background-color: #AAA;
        }
    </style>
</head>
<body>
    <div id="box"> </div>
    <button onclick="change_box(this)">隐藏</button>
    <script>
        function change_box(obj){
            var box = document.getElementById(&#39;box&#39;);
            if(box.style.display == &#39;none&#39;){
                box.style.display = "";
                obj.innerHTML = "隐藏";
            }else{
                box.style.display = "none";
                obj.innerHTML = "显示";
            }
        }
    </script>
</body>
</html>

上記のコードを実行し、画面上の「表示」をクリックします。次の図に示すように、「ページ」または「非表示」ボタンを使用して、ページ上の指定した要素を表示または非表示にします。

CSSの表示属性の値は何ですか?

<span style="font-size: 16px;">#display : block<strong></strong></span>

表示属性の属性値ブロックにより、要素を強制的にブロックレベルの要素にすることができます。サンプル コードは次のとおりです: 

<!DOCTYPE html>
<html>
<head>
    <style>
        a{
            display: block;
            width: 150px;
            height: 50px;
            background-color: #ACC;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="">这是一个链接</a>
</body>
</html>

CSSの表示属性の値は何ですか?

<strong>display: inline<span style="font-size: 16px;"></span></strong>

display 属性の属性値 inline により、要素が強制的に次のようになります。インライン要素。その要素はインライン要素を持ちます。他のインライン要素と行を共有できるなどの機能があります。サンプルコードは次のとおりです。

##display: inline-blockCSSの表示属性の値は何ですか?

<span style="font-size: 16px;">表示属性 inline-block の属性値により、要素を強制的に変換できます。インラインブロック要素。インラインブロックは、幅と高さを設定できるブロックの特徴と、排他的な行を占有しないインラインの特徴を併せ持っています。サンプルコードは次のとおりです。 <strong></strong> (学習ビデオ共有: </span>Web フロントエンド )

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

JavaScript html5 css css3 继承 对象 display column flex table tbody td tr th
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jqueryのvalidateはラベルですか?次の記事：jqueryのvalidateはラベルですか?

関連記事

続きを見る