ホームページ > 記事 > ウェブフロントエンド > 表示ブロックとはどういう意味ですか?使い方？
表示ブロックとはどういう意味ですか?使い方？
- 不言オリジナル
- 2018-10-24 14:08:32111216ブラウズ
display 属性に block 属性値があることは誰もが知っていますが、この display:block は何を意味するのでしょうか?どのように使用できますか?この記事ではdisplay:blockの意味と使い方を紹介しますので、困っている友達は参考にしてください。
まず、display:block の意味を見てみましょう。
実際、css 表示属性は何を意味するのでしょうか? cssのdisplay属性の詳しい説明 この記事では、display:block属性の意味について説明しました。簡単に言うと、display:blockを設定すると、要素をブロックレベルの要素として表示します。
display:block の意味を読んでもまだ理解できない場合は、読み進めて display:block の使い方を見てみましょう。 display:block を使用することで、display:block の意味をさらに理解できます。
#推奨マニュアル: CSSオンラインマニュアル
display:block:
#の使い方#すべてのブロックレベル要素については、display:block を使用して定義する必要はありません。ブロックレベル要素のデフォルトの属性は block であるため、 や のように、display:block がより一般的に使用されます。など。ブロック レベルの要素ではない要素のうち、具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
</body>
</html>上記のコードは display:block で定義されていないため、その効果は次のとおりです。
上記のレンダリングから、スパンの幅と高さを設定するのは無意味であることがはっきりとわかります。コンテンツはすべて同じ行にあります。どのように表示されるかを見てみましょう。 display:block 定義を使用する場合と同様に、コードは次のようになります:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width: 200px;
height: 30px;
display: block;
}
</style>
</head>
<body>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
</body>
</html>display:block を使用する効果は次のとおりです:
上記の効果は次のとおりです。これらは幅と高さの設定に有効であり、One line 専用であることが明確にわかります。
1.cssでの表示の使い方css 学習マニュアル
2. imgタグのdisplay:block属性を設定する際に幅を100%に設定できない問題の解決方法
関連動画のおすすめ:
1. CSS ビデオ チュートリアル - 翡翠少女般若心経編
上記で紹介した内容を読んで、display:block についてさらに深く理解できましたか。display:block 属性について詳しく知りたい場合は、 php Chinese Net の
以上が表示ブロックとはどういう意味ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。