インライン要素をブロック要素に変換するCSSステートメントとは何ですか-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

インライン要素をブロック要素に変換するCSSステートメントとは何ですか

Jan 20, 2022 pm 12:01 PM

css インライン要素ブロック要素

インライン要素をブロック要素に変換する CSS ステートメントは「inline element {display: block;}」です。 display 属性は、レイアウト作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。この属性の値が "block" の場合、指定された要素はブロックレベルの要素タイプとして表示されます。

インライン要素をブロック要素に変換するCSSステートメントとは何ですか

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

CSS の表示分類によれば、HTML 要素はブロック要素、インライン要素、インラインブロック要素の 3 種類に分類されます。

CSS では、インライン要素に display:block スタイルを設定してブロック要素に変換するだけです。

表示属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメントタイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため、危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。

block: この要素は、この要素の前後に改行を入れて、ブロックレベルの要素として表示されます。
#インライン: デフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。
#inline-block: インラインブロック要素。 (CSS2.1 の新しい値)

css ブロック要素にインラインスタイルを設定する例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
span {
background-color: #2cde57;
}

.span1 {
display: block;
width: 1000px;
}
</style>
</head>
<body>
<span>第一个span，内联元素</span>
<span>第二个span，块元素</span>
</body>
</html>

ログイン後にコピー

インライン要素をブロック要素に変換するCSSステートメントとは何ですか