HTML 要素タイプ: ブロックレベル要素、インライン要素 (インライン要素とも呼ばれる)、およびインラインブロックレベル要素。 _html/css_WEB-ITnose

HTML のタグ要素は、通常、ブロック レベル要素、インライン要素 (インライン要素とも呼ばれる)、およびインライン ブロック レベル要素の 3 つの異なるタイプに分類されます。

ブロックレベル要素の特徴:

1. 各ブロックレベル要素は新しい行で始まり、後続の要素も新しい行で始まります。 (1つのブロックレベル要素が1行を占有する)

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

3. 要素の幅が設定されていない場合、その幅は親コンテナの 100% (親要素の幅と同じ) です

一般的に使用されるブロック要素は次のとおりです:

、

、

...

、

、
、

、、

、

、

Set display :block; は要素をブロックレベルの要素に変換できます。

インライン要素の特徴:

1. 他の要素と同じ行にあります。

2. 要素の高さ、幅、上下の余白は設定できません。要素はその内容です。テキストや画像の幅は変更できません。

一般的に使用されるインライン要素は次のとおりです:

、、
、、、、、

display:inlineを設定すると、ブロック要素をインライン要素に変換できます

インラインブロックレベル要素の特徴:

(インライン要素とブロックレベル要素の両方の特性を持ちます)

1、およびその他の要素line; 2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。

一般的に使用されるインライン ブロック要素は次のとおりです:


,

display:inline-block; float:left / right; 要素はインライン ブロック レベル要素として設定できます。

関連ラベル：

html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

ソース：php.cn

前の記事：js,jquery,css,html5特效_html/css_WEB-ITnose 次の記事：HTML 要素と有効な DTD_html/css_WEB-ITnose

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1802

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1941

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1653

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1556

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1588

関連トピック

詳細>

• ブラウザの互換性
• すべてのPPTの背景を置き換える方法
• Eclipseで中国語を設定する方法
• フォーカスとはどういう意味ですか
• オーディオインターフェイスはマザーボードのどこにありますか?
• 正式なデジタル通貨取引プラットフォーム
• AEとはどのようなソフトウェアですか
• mongodb の応用分野は何ですか?

人気のおすすめ

• URLってどういう意味ですか？
• DOM とはどういう意味ですか?
• 画像サイズを変更する方法
• HTMLでフォントを太字にする方法
• HTML画像のサイズを設定する方法

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417114
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4258046
• 
  JAVA 初心者向けビデオチュートリアル

  2477809
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503996
• 
  PHP ゼロベースの入門チュートリアル

  844297

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417114 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2477809 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503996 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215302 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  877577 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6435 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5055 回の学習
• 
  Go言語実践GraphQL

  4249 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  633 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21612 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！