ホームページ > 記事 > ウェブフロントエンド > display 属性を使用して HTML の機能と応用を探索する
display 属性を使用して HTML の機能と応用を探索する
- WBOYオリジナル
- 2024-02-02 13:33:051139ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。