CSSの表示属性の値は何ですか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-09-06 16:28:37

オリジナル

8114 人が閲覧しました

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('box'); if(box.style.display == 'none'){ box.style.display = ""; obj.innerHTML = "隐藏"; }else{ box.style.display = "none"; obj.innerHTML = "显示"; } } </script> </body> </html> ログイン後にコピー上記のコードを実行し、画面上の「表示」をクリックします。次の図に示すように、「ページ」または「非表示」ボタンを使用して、ページ上の指定した要素を表示または非表示にします。 `<span style="max-width:90%">#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> ログイン後にコピー `<strong>display: inline<span style="font-size: 16px;"></span></strong>` display 属性の属性値 inline により、要素が強制的に次のようになります。インライン要素。その要素はインライン要素を持ちます。他のインライン要素と行を共有できるなどの機能があります。サンプルコードは次のとおりです。 ##display: inline-block `<span style="font-size: 16px;">表示属性 inline-block の属性値により、要素を強制的に変換できます。インラインブロック要素。インラインブロックは、幅と高さを設定できるブロックの特徴と、排他的な行を占有しないインラインの特徴を併せ持っています。サンプルコードは次のとおりです。 <strong></strong> (学習ビデオ共有: </span>Web フロントエンド` )

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