検索
ホームページウェブフロントエンドCSSチュートリアルCSS ブロックレベル要素の定義は何ですか? CSS ブロックレベル要素とは何ですか?

CSS ブロックレベル要素とは何ですか? CSS を学んだばかりの友達にとっては、この問題がよく理解できないかもしれません。そこで、この記事では、css ブロックレベル要素の定義と、CSS ブロックレベル要素とは何なのかを紹介します。

CSSブロックレベル要素の定義

W3Cの説明によると、ブロック(ブロックレベル)要素を専用行に表示するということです。その兄弟要素は、それと同じ行上にあってはなりません (ドキュメント フローから外れない限り)。実際、平たく言えば、ブロック要素は一般に他の要素のコンテナ要素であり、他のブロック要素またはインライン要素を収容できます。最も一般的なものは P と div です。簡単に言うと、ブロック要素は他の 4 つの正方形を保持できる 4 つの正方形のボックスのようなもので、ページ上のどこにでも表示できます。

CSS ブロックレベル要素の上記の定義がまだ理解できない場合は、CSS ブロックレベル要素の 3 つの特徴を見てみましょう:

1. 各ブロックレベル要素は独自の行を占め、後続の要素も同様です。新しい行を開始することのみが可能であり、2 つの要素が同じ行を共有することはできません。

2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。

3. 要素の幅が設定されていない場合、デフォルトは親要素の幅になります。

これら 3 つの CSS ブロックレベル要素の特徴を読んだので、CSS 要素についてより深く理解できました。次に、CSS ブロックレベル要素とは何なのかを見てみましょう。

CSS ブロックレベル要素とは何ですか?

共通の CSS ブロックレベル要素:

address: アドレス。
blockquote: ブロック引用符。
center: ブロックを中央に揃えます。
dir: ディレクトリリスト。
div: 一般的に使用されるブロックレベルであり、CSS レイアウトの主要なタグでもあります。
dl: 定義リスト。
フィールドセット: フォームコントロールグループ。
フォーム: インタラクティブなフォーム。
h1–h6: タイトル。
hr: 水平分割線。
isindex: 入力プロンプト。
メニュー: メニューリスト。
noframes: フレームのオプションのコンテンツ (このブロックのコンテンツは、フレームをサポートしていないブラウザーに表示されます)。
noscript: オプションのスクリプト コンテンツ (スクリプトをサポートしていないブラウザーに表示されます)。
オル:整然とした形。
p: 段落。
前: 書式設定されたテキスト。
テーブル:テーブル。
ul: 順序なしリスト。

CSSブロックレベル要素の紹介ですCSSインライン要素とは何なのかについて次の記事で紹介します。 CSS ブロックレベル要素とインライン要素の違い

関連する推奨事項:

インライン要素とブロックレベル要素とは何ですか? _html/css_WEB-ITnose

CSS ブロックレベル要素/インライン要素、継承および関連属性の紹介

以上がCSS ブロックレベル要素の定義は何ですか? CSS ブロックレベル要素とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
「CSS4」アップデート「CSS4」アップデートApr 11, 2025 pm 12:05 PM

私が最初にCSS4¹のことを鳴らしたので、それについてもっと多くの議論がありました。私はここで他の人から私のお気に入りの考えをまとめようとしています。がある

3種類のコード3種類のコードApr 11, 2025 pm 12:02 PM

新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います

HTTPSは簡単です!HTTPSは簡単です!Apr 11, 2025 am 11:51 AM

私は、httpsの複雑さを公に嘆きながら罪を犯しました。過去に、私はサードパーティのベンダーからSSL証明書を購入し、問題がありました

HTMLデータ属性ガイドHTMLデータ属性ガイドApr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

JavaScriptの不変性を理解するJavaScriptの不変性を理解するApr 11, 2025 am 11:47 AM

JavaScriptの不変性を以前に作業したことがない場合は、変数を新しい値または再割り当てに割り当てることと混同しやすいことがわかります。

最新のCSS機能を備えたカスタムスタイリングフォーム入力最新のCSS機能を備えたカスタムスタイリングフォーム入力Apr 11, 2025 am 11:45 AM

最近、カスタムチェックボックス、ラジオボタン、トグルスイッチを構築することは完全に可能です。必要でさえありません

脚注文字脚注文字Apr 11, 2025 am 11:34 AM

脚注に最適な特別なスーパーセット番号の文字があります。ここにあります:

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません