CSSベースラインとは何ですか

CSSにおけるベースラインの「ベースライン」は、漢字の下端ではなく、英語文字の下端のことです。ベースラインは常に行内の最も高い要素と一致し、ベースラインは行内の最も高い要素に応じて変化します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

1. 基本概念

1. ベースライン、ボトムライン、トップライン、ミドルライン

注: ベースライン (ベースライン)ではありません。 漢字テキストの下端は、英語の文字「x」の下端です。

2. コンテンツ領域

コンテンツ領域は、最下行と最上行で囲まれた領域を指します (インライン要素の表示:インライン。これは、background-color 属性 out を通じて表示されます)、実際には必ずしも表示されるわけではありませんが、存在します。コンテンツ領域のサイズは、font-size の値と単語数に基づいて変化します。

3. 行間隔と行の高さ

行の高さ: コンテンツ領域と、コンテンツ領域に基づいて対称的に拡張される空白領域が含まれます。これを行の高さと呼びます。一般に、隣接するテキスト行のベースライン間の距離と考えることもできます。

行間隔: 隣接するテキスト間の、前のテキスト行のベースラインと次のテキスト行の最上行との間の距離を指します。もちろん、(上部のテキスト行の高さ - コンテンツ領域の高さ)/2 (下部のテキスト行の高さ - コンテンツ領域の高さ)/2 と考えることをお勧めします。

4. インライン ボックス

インライン ボックスはブラウザのレンダリング モデルにおける概念であり、表示することはできませんが、存在します。行の高さで指定された高さです。

5. ライン ボックス

ライン ボックス (ライン ボックス) は、同じラインの内側のボックスと同様の概念です。現在の行の仮想四角形。ボックスはブラウザのレンダリング モードの概念でもあります。行ボックスの高さは、この行のすべての要素の中でのインライン ボックスの最大値と等しくなります (行の高さの値が最も大きいインライン ボックスがベンチマークとして使用され、他のインライン ボックスは独自の値を使用してベンチマークに揃えられます)

2. 垂直方向の配置: 要素の垂直方向の配置を設定します。

行の高さは、純粋なテキストの 1 行の垂直方向のセンタリング (行の高さ) です。行に画像やテキストが含まれている場合、ブラウザがそれらをレンダリングした後、読者はテキストや画像が表示されていないことがわかります。垂直方向の中心線に沿って中央に配置されますが、ベースラインに沿って整列します。これは、要素のデフォルトの垂直方向の配置がベースライン配置 (vertical-align:baseline) であるためです。

CSS 構文:vertical-align

構文:

ベースライン | サブ | スーパー | トップ | テキストトップ | middle |bottom | text-bottom | | |inherit

説明:

要素コンテンツの垂直方向の配置を設定します。

パラメータ:

baseline: ベースラインの配置;

sub: 下付き表示;

super: 上付き表示; ： 上揃え;

〜 posit text-top: テキストの上揃え;

〜 posit middle: 中央揃え; // よく研究されていないプロパティ

〜bottom: 下揃え;

## text -bottom: テキストの下揃え;

パーセンテージと長さ: CSS2、負の値も可能。

初期値:baseline

継承:vertical-align 属性を正しく処理するための要素ノードは継承されません)。また、このプロパティは継承できません。

属性値の詳細な説明

上のセクションでは、テキストのベースライン、トップライン、ミドルライン、ボトムライン、およびコンテンツエリア、インラインボックス、ラインを紹介しました。このセクションでは、垂直方向の位置合わせはこれらの概念と密接に関連しています。

1. ベースラインの配置 (vertical-align:baseline)

ベースラインの配置 (vertical-align:baseline) は、要素のベースラインを次の要素と同じにします。ベース要素 (行の高さが最も高いベースラインをベースラインとして配置します)

2. 上部の配置 (vertical-align: top)

上部の配置 ( vertical-align : top ) は、要素のインライン ボックスの上部を行ボックスの上部に揃えます。

3. テキストの上揃え (vertical-align: text-top)

テキストの上揃え (vertical-align: text-top) は、要素をインラインでフレーム化します。上部はテキスト行

4 の上部行に揃えられます。vertical-align :bottom

Vertical-align :bottom ) は、次の逆です。上揃え (vertical-align : top)

5. テキストの下揃え (vertical-align : text-bottom)

6. 垂直方向の配置: 中央

中央の配置 (垂直方向の配置: 中央) は、通常、画像の垂直方向の中心線をテキストの行に揃えるために画像で使用されます。 (言葉の処理に多少のズレがあります。具体的な根拠はまだ研究されていません。研究した学生は私に連絡してください~~)

の定義正中線: 正中線はベースラインに位置します。上では、ベースラインからの距離は小文字の高さの半分です。 ベースラインから 1/4 em 上に正中線として配置します。

7. 上付き文字と下付き文字

上付き文字 (vertical-align:super) は、ベース要素のベースラインに対して要素のベースラインを上げ、下付き文字 (vertical-align:sub) は下げます。要素のベースラインと一定量の移動は CSS 仕様では指定されておらず、ブラウザによって決定されます。

上付き文字と下付き文字は要素のテキストのサイズを変更しません。

8. 長さの値とパーセンテージ

上付き文字と下付き文字と同様に、長さの値とパーセンテージ値は、要素のベースラインを高く (正の値) または低くすることができます (負の値)、ベース要素のベースラインを基準とした値)。

上付き文字と下付き文字の移動サイズはブラウザによって決定され、長さの値またはパーセンテージを設定することで、テキストの上下の移動範囲を正確に制御できます。

パーセンテージは行の高さに関係します。たとえば、次のコードは下図のように表示されます。

@FireFox での私のテスト

テスト コード:

<style type="text/css">
  p {
     vertical-align:baseline;    
     font-size:20px;  
     line-height:60px; 
     background-color:yellow; 
  }
  span {
     background-color: red; 
  }
  u { 
     background-color: blue; 
  }
  del { 
     background-color: pink; 
  }
</style>

//HTML代码
<p> 
    <span>Ajax测试</span> 
    <u>Ajax测试</u> 
    <del>Ajax测试</del> 
    Ajax测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 
</p>

デフォルト:

その他の指示:

1. SPAN、U、DEL タグの offsetWidth = SUM (文字 * フォント サイズ * 補正係数) (ここで、中国語の補正係数は 1、補正係数は数字の補正係数は 1 0.6 ですが、英語の文字補正係数は大きく異なります (たとえば、ijl は非常に小さく、wmk などは比較的大きく、英語の大文字の補正係数も均一ではありません)。

2. SPAN、U、および DEL タグの offsetHeight。

当然の結果: インライン要素の背景レンダリング領域、つまりコンテンツ領域のサイズは、font-size の影響を直接受けます。

ブロックレベル要素の場合、ブロックレベル要素の計算された高さは、含まれる行ボックスの高さを合計することによって計算されるため、ここでの高さは 60px;

3.span.style を変更 .lineHeight を 15px に設定 (10px から 60px に変更) —-> 変更は見つかりませんでした

# 推論: コンテンツ領域のサイズは line-height の影響を受けません。これは、隣接するテキスト行のベースライン間のギャップを処理するために使用されます。

4.span.style.lineHeight を 70px に設定します (61px から 80px) —->ライン ボックスの高さは設定に応じて調整され始めます

結果 1: 高さライン ボックスのライン内にあるインライン ボックスの最高の高さ。line-height によって調整されます。

p 要素の計算された高さの値は、p.style.lineHeight によって制御されない、span.style.lineHeight 値です。

帰結 2: height 属性を設定せずに計算された

の高さの値は、ライン ボックスの高さの累積値です。

## 5.span.style.verticalAlign= sub; del.style.verticalAlign= super; –>画像を見て話してください

推論:ラインボックスの高さ、上下の添え字はベースラインに基づいて移動します。

6. すべての整列方法の確認:

∣ positi a) まず行内のベース要素を確認し、行の高さの最大値を持つ要素をベースとして取得します; )その他text はベース要素に合わせて配置され、その効果は line-height とvertical-align に基づいて実現されます;

c) sub と super はベースラインを変更する方法なので、最終的な要素に影響します。行ボックスの高さ;

d) 上部と下部はインライン ボックスの配置です。上部とは、要素のインライン ボックスの上部とベースのインライン ボックスの上部の位置合わせを指します。

# d) 上部とテキスト下部も影響を受けます。最終行ボックスの高さは、要素のインラインボックスの上部がベース要素のコンテンツエリアの上部に揃うことを意味します（line-height=コンテンツエリアの高さの場合、ベース要素の上部に位置合わせされます）コンテンツ領域。line-height がコンテンツ領域の高さより小さい場合、テキストは上昇し続けます。シフト現象は、line-height を 0px に設定すると、コンテンツ領域の垂直方向の中央が正確に位置合わせされます。 )

f) パーセンテージと長さの値: ベースラインが移動され、パーセンテージは行の高さ * パーセンテージとして計算されます。

g) 中については、ベースラインを基準に対称に展開されているように感じますが、ベースラインの生成ルールが不明瞭です。

推奨学習:

css ビデオ チュートリアル

以上がCSSベースラインとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。