インライン要素の視覚的な書式設定_html/css_WEB-ITnose

目次 [1] 基本用語 [2] ラインボックスの構築 [3] 非置換要素 [4] 置換要素

前の単語

インライン要素は、ブロックレベルの要素ほど単純かつ直接的ではありません。生成されたばかりのボックス、他のコンテンツは通常、これらのボックスと共存できません。インライン要素の視覚的な書式設定を制御する主なコントロールは、font-size、line-height、vertical-align です

基本用語

インライン要素の視覚的な書式設定を理解する前に、まず関連するいくつかの基本用語を理解する必要があります

匿名テキスト

匿名テキストとは、インライン要素に含まれないすべての文字列を指します

emボックス

emボックスはフォントで定義されており、文字ボックス（文字ボックス）とも呼ばれます。実際のグリフは、em ボックスよりも高い場合もあれば、低い場合もあります。 CSSでは、font-sizeの値によって各emボックスの高さが決まります

コンテンツエリア

非置換要素では、コンテンツエリアは2種類あります。コンテンツ領域は、要素内の各文字の em ボックスをつなぎ合わせて形成されるボックスにすることも、置換要素内の文字グリフによって記述されるボックスにすることもできます。コンテンツ領域は、要素の固有の高さになります。要素とマージン、境界線、またはパディングの可能性があります。コンテンツ領域は、ブロックレベル要素のコンテンツボックスに似ています

行間隔

行間隔（行間）は、font-size と line-height の違いです。この違いは実際には 2 つの半分に分割され、コンテンツ領域の上部と下部にそれぞれ適用されます

[注] 行間隔は置換されていない要素にのみ適用されます

インラインボックス

インラインボックスはコンテンツに行間隔を追加しますエリアの説明。置換されていない要素の場合、要素のインライン ボックスの高さは行の高さと同じになります。置換された要素の場合、要素のインライン ボックスの高さはコンテンツ領域の高さとまったく同じになります

ライン ボックス

これは、ボックスの最高点と最小ボックスの最低点が表示される行を含むインラインです。言い換えると、ライン ボックスの上端は最上位のインライン ボックスの上端に配置され、ライン ボックスの下端は最下位のインライン ボックスの下端に配置される必要があります。ラインボックス

1. 要素を置換する: 各要素の height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width の値を取得し、それらを加算します。置換要素: 各行の非置換要素と非置換要素を取得します。子孫のインライン要素に属するすべてのテキストの font-size 値と line-height 値を取得し、line-height から font-size を減算して行を取得します。行間隔を 2 で割って、その半分をボックスの上部と下部にそれぞれ適用します

2. 各コンテンツ領域について、全体のベースラインの上下にどれだけ伸びるかを決定します。ライン。置換要素: 行全体のベースライン上にその下端を配置します。非置換要素: 各要素と匿名テキストの各部分のベースラインの位置を決定し、行自体のベースラインの位置を把握します。 then align them

3.vertical-align 値で指定された要素の垂直オフセットを決定します。これから、要素のインライン ボックスを上下にどのくらい移動すべきかを知ることができ、要素がベースラインの上または下に伸びる距離を変更することができます

4. すべてのインライン ボックスがどこに配置されるかがわかったので、次は最終ラインのフレーム高さを計算します。これを行うには、ベースラインと最も高いインライン ボックスの上部の間の距離と、ベースラインと最も低いインライン ボックスの下部の間の距離を加算するだけです

インライン非置換要素

コンテンツエリア

インラインの場合置換されない要素または匿名テキスト 部分的には、font-size 値によってコンテンツ領域の高さが決まります。インライン要素の font-size が 15px の場合、コンテンツ領域の高さは 15px です

インラインボックス

コンテンツ領域と行間隔を足したものがインラインボックスとなります。インライン非置換要素の font-size が 15px で、line-height が 21px の場合、その差は 6px です。ユーザー エージェントは、これらの 6 ピクセルを半分に分割し、半分をコンテンツ領域の上部と下部に適用します。その結果、インライン ボックスが作成されます。行の高さがフォント サイズより小さい場合、インライン ボックスは実際にはコンテンツよりも小さくなります。エリア

ライン ボックス

ライン ボックスは、ライン内で最も高いインライン ボックスの上部と最も低いインライン ボックスの下部の間の距離として定義され、各ライン ボックスの上部はライン ボックスの下部の隣にあります。前の行のラインボックス

ボックスのプロパティ

パディング、マージン、ボーダーはラインボックスの高さに影響しません、つまり行の高さに影響しません

インライン要素のボーダーは制御されますline-height ではなく font-size で指定します

外側のマージンは適用されません インライン非置換要素の上下は

margin-left、padding-left、border-left は要素の先頭に適用されます。 margin-right、padding-right、border-right は要素の末尾に適用されます

div{    width: 200px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    padding: 6px;        margin: 6px;    font-size: 30px;    line-height: 50px;}

<div><span>测试文字测试文字测试文字</span></div>

行内替换元素

框属性

　　行内替换元素有固有的高度和宽度，替换元素的整体包括内容、外边距、内边距和边框来定义元素的行内框

　　替换元素可以增加行框的高度，但不影响line-height值

div{    width: 300px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    font-size: 30px;    line-height: 50px;}img{    height: 26px;    padding: 2px;    margin: 2px;}

<div><span>测试文字测试<img src="backup/lamp.gif" alt="测试图片">文字测试文字</span></div>

行高

　　行内替换元素需要使用line-height值，从而在垂直对齐时能正确地定位元素。因为vertical-align的百分数值是相对于元素的line-height来计算的。对于垂直对齐来说，图像本身的高度无关紧要，关键是line-height的值

基线

　　默认地，行内替换元素位于基线上。如果向替换元素增加下内边距、外边距或边框，内容区会上移。替换元素并没有自己的基线，所以相对来说最好的办法是将其行内框的底端与基线对齐。因此，实际上是下外边距边界与基线对齐

　　对于这种情况最常见的解决办法是使图像成为块级元素，这样它们就不会产生行框。另一种可取的办法是将图像的父级的line-height设置为0