CSS ブロックレベル要素/インライン要素、継承および関連プロパティの概要-CSSチュートリアル-php.cn

CSS ブロックレベル要素/インライン要素、継承および関連プロパティの概要

一个新手

リリース： 2017-09-23 10:06:24

オリジナル

1872 人が閲覧しました

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

通常、ブラウザでは要素の前後に改行を使用してブロックレベル要素が表示されます。これを一連のボックスとして視覚化できます。
ブロックレベルの要素は常に新しい行で始まり、利用可能な全幅を占めます (可能な限り左右に拡張します)。
使用法: ブロックレベル要素は <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. サウンドスタイル属性:
一時停止前、一時停止後、一時停止、キュー前、キュー後、キュー、再生中

II. 継承される属性

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 -ヘッダー、音声速度、音量、音声ファミリー、ピッチ、ピッチ範囲、ストレス、豊かさ、方位角、仰角