display 属性を使用して HTML の機能と応用を探索する-htmlチュートリアル-php.cn

display 属性を使用して HTML の機能と応用を探索する

WBOY

リリース： 2024-02-02 13:33:05

オリジナル

1138 人が閲覧しました

display 属性を使用して HTML の機能と応用を探索する

HTML の表示属性の特徴と用途

HTML は、Web ページを作成するために使用されるマークアップ言語であり、HTML でよく使用される属性の 1 つです。 . ページ上での要素の表示方法を制御するために使用されます。表示属性にはさまざまな値があり、それぞれの値には独自の特性と用途があります。この記事では、いくつかの一般的な表示属性値を紹介し、対応するコード例を示します。

display: block
block は、display 属性のデフォルト値です。これは、要素がブロックレベルの要素として表示されることを意味します。ブロックレベル要素はページ上の 1 行全体を占め、改行に遭遇するまで独自の行を占めます。ブロックレベルの要素では、幅、高さ、内部および外部マージンなどの属性を設定でき、他の要素に対応できます。

サンプルコード:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: block;
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 10px;
}
</style>
</head>
<body>

<div>This is a block element.</div>

</body>
</html>

ログイン後にコピー

display: inline
inline は、要素がインライン要素として表示されることを意味します。インライン要素はそれ自体では 1 行を占有せず、他の要素と同じ行に表示できます。インライン要素の幅、高さ、内側と外側の余白などのプロパティは影響を与えず、テキストや他のインライン要素を収容できます。

サンプルコード:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: inline;
  background-color: yellow;
  padding: 10px;
}
</style>
</head>
<body>

<span>This is an inline element.</span>

</body>
</html>

ログイン後にコピー

display: inline-block
inline-block は、表示属性のもう 1 つの一般的な値で、要素がインラインであることを示します。ブロック要素が表示されます。インラインブロック要素を同一行に表示でき、幅、高さ、内余白、外余白などの属性を設定できます。

サンプルコード:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}
</style>
</head>
<body>

<div>This is an inline-block element.</div>
<div>This is another inline-block element.</div>

</body>
</html>

ログイン後にコピー

display: none
none は、要素が表示されず、要素がページ上のスペースを占有しないことを意味します。要素を非表示にするには、display: none を使用します。これは、ページから要素を削除するのと同じです。

サンプルコード:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
}
</style>
</head>
<body>

<p>This paragraph will not be displayed.</p>

</body>
</html>

ログイン後にコピー

上記は、表示属性のいくつかの一般的な値と、対応するコード例です。 display 属性を柔軟に使用することで、ページ上での要素の表示方法を制御し、さまざまなレイアウト効果を実現できます。

以上がdisplay 属性を使用して HTML の機能と応用を探索するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。