CSS ブロックレベル要素/インライン要素、継承および関連プロパティの概要
ブロックレベル要素とは何ですか?
通常、ブラウザでは要素の前後に改行を使用してブロックレベル要素が表示されます。これを一連のボックスとして視覚化できます。
ブロックレベルの要素は常に新しい行で始まり、利用可能な全幅を占めます (可能な限り左右に拡張します)。
使用法: ブロックレベル要素は <body> 要素内にのみ出現できます。
インライン要素とは何ですか?
HTML において、インライン要素とは、コンテンツの流れを中断するのではなく、要素を定義するタグで囲まれたスペースのみを占める要素のことです。この記事では、HTML のインライン要素と、それらがブロックレベルの要素とどのように異なるかを検討します。
インライン要素は新しい行で開始されず、必要な幅のみを占めます。
継承とは何ですか?
CSS における継承は、親要素から子要素に特定のプロパティを渡すメカニズムです。
個人的な理解: どの要素が親から継承され、どの要素がデフォルトで子に継承されるか。例: 両親が両方とも黒髪の場合、子供たちはデフォルトで黒髪を継承します。子供が髪を白髪にしたいのでなければ、その親の子供ではない場合は、別途話しましょう。
一部の CSS プロパティは無意味であるため、すべての CSS プロパティが継承されるわけではありません。たとえば、子要素が親要素と同じマージンを必要とする可能性は低いため、マージンは継承されません。ほとんどの場合、常識的にどのプロパティが継承され、どのプロパティが継承されないかがわかりますが、CSS 2.1 仕様のプロパティの概要テーブルで各プロパティを確認する必要があります。
CSS で継承できる属性と継承できない属性
1. 継承なしのプロパティ
1. 要素が生成するボックスのタイプを指定します
2. Text 属性:
vertical-align: 垂直方向のテキスト配置
text-装飾: テキストに追加する装飾を指定します
text-shadow: テキストの影の効果
white-space: 空白処理
unicode-bidi: テキストの方向を設定します
ボックスモデルのプロパティ:
幅、高さ、マージン、マージン - 上、マージン - 右、マージン - 下、マージン - 左、ボーダー、ボーダー スタイル、ボーダー上スタイル、ボーダー右スタイル、ボーダー下スタイル、ボーダー左スタイル、ボーダー -幅、ボーダー上部の幅、ボーダー右右、ボーダー下部幅、ボーダー左幅、ボーダー色、ボーダー上部色、ボーダー右色、ボーダー下部色、ボーダー- left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4. 背景プロパティ:
background、background-color、配置属性:
float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max- height、overflow、clip、z-index
6. コンテンツ属性を生成します:
content、counter-reset、counter-increment
7. アウトライン スタイル属性:
outline-style、outline-width、outline-color、outline
8.ページスタイル属性:
サイズ、改ページ前、改ページ後
9. サウンドスタイル属性:
一時停止前、一時停止後、一時停止、キュー前、キュー後、キュー、再生中
1. フォントファミリー属性
font: 結合されたフォント
font-family: 要素のフォントファミリーを指定します
font-weight: フォントの太さを設定します
font-size: フォントのサイズを設定します
font-style: 定義 フォントのスタイル
font-variant: テキストを表示するためにフォントを小文字に設定します。これは、すべての小文字が大文字に変換されることを意味しますが、小文字のすべての文字は、他の文字と比べてフォント サイズが小さくなります。テキストの残りの部分へ。
font-stretch: 現在の font-family を引き伸ばして変形します。すべての主要なブラウザでサポートされているわけではありません。
font-size-adjust: 優先フォントの X 高さが維持されるように、要素のアスペクト値を指定します。
2. テキストシリーズの属性
text-indent: テキストのインデント
text-align: テキストの水平方向の配置
line-height: 行の高さ
word-spacing: 単語間のスペース (つまり、単語の間隔) を増減します
letter-spacing : 文字間のスペース (文字間隔) を増減します
text-transform: テキストの大文字と小文字を制御します
direction: テキストの書き込み方向を指定します
color: テキストの色
3. 要素の可視性: 可視性
4. テーブル レイアウト属性:
キャプション-side、border-collapse、border-spacing、empty-cells、table-layout
5. リスト レイアウト属性:
list-style-type、list-style-image、list-style-position、list-style
6、コンテンツ属性の生成: 引用符
7. カーソル属性: カーソル
8. ページ スタイル属性:
page、page-break-inside、windows、orphans
9. サウンド スタイル属性:
speak、speak-punctuation、speak-numeral、speak -ヘッダー、音声速度、音量、音声ファミリー、ピッチ、ピッチ範囲、ストレス、豊かさ、方位角、仰角
1. 要素の可視性: カーソル属性
2. : カーソル
4. インライン要素で継承できる属性
1. フォントファミリー属性
2. text-indent と text-align を除くテキストシリーズ属性
1.インデント、text-alignnce_and_cascade #The_cascade
以上がCSS ブロックレベル要素/インライン要素、継承および関連プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7476
15
1377
52
77
11
19
31
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップの日付を確認する方法
Apr 07, 2025 pm 03:06 PM
ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
