ホームページ > ウェブフロントエンド > フロントエンドQ&A > インライン要素をブロック要素に変換するCSSステートメントとは何ですか

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

青灯夜游
リリース: 2022-01-20 12:01:28
オリジナル
1852 人が閲覧しました

インライン要素をブロック要素に変換する 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ステートメントとは何ですか

(学習ビデオ共有: css ビデオ チュートリアル)

以上がインライン要素をブロック要素に変換するCSSステートメントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート