CSSのline-heightプロパティの詳しい説明

(推奨チュートリアル: CSS ビデオ チュートリアル )

フロントエンドに入ったとき、レイアウトに CSS が使えると感じました表示、位置、浮動小数点だけ知っていれば大丈夫です。今は快適です。今後、作業上の問題が次々と発生するため、CSS はいくつかのスタイル属性ほど単純ではないことが徐々に理解できます。最近、行に関する知識をいくつか読みました。高さがあるのでここでまとめておきます。

いわゆる行の高さとは、テキスト行のベースライン間の垂直方向の距離を指します。この文を理解するには、まずいくつかの基本的な知識を理解する必要があります:

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

nbsp;html>

    
        <title>Test</title>
        <style>
            span
            {
                padding:0px;
                line-height:1.5;
            }
        </style>
    
    
        <div>
            <div>
                <span>中文English</span>
                <span>English中文</span>
            </div>
        </div>
    

上から 4 行tobottom これらは、トップライン、ミドルライン、ベースライン、ボトムラインです。これらは、英語の文字を学習するときの 4 つの線と 3 つのグリッドに非常に似ています。vertical-align 属性には、top、middle、baseline があることがわかります。 、および下は、これら 4 つの行に関連しています。

特に、ベースラインは収益ではなく、収益は収益であることに注意してください。

行の高さ、行間隔、および半行間隔

行の高さは、コンテキスト行のベースライン間の垂直距離、つまり、コンテキスト行のベースライン間の垂直距離を指します。写真の赤い2本の線です。

行間隔とは、ある行の一番下の行から次の行の一番上の行までの垂直距離、つまり、最初の行のピンクの線と2番目の緑の線の間の垂直距離を指します。行。

半行間隔は行間隔の半分、つまり領域 3/2 の垂直距離、領域 1、2、3、4 の距離の合計が行の高さ、領域 1、2、および 4 の距離の合計がフォント サイズであるため、半行間隔は次のように計算することもできます: (行の高さ - フォント サイズ)/2

#コンテンツエリア、インラインボックス、ラインボックス

コンテンツエリア: 下行と上行で囲まれた領域、つまり濃い灰色の背景下の写真のエリア。

インライン ボックス、各インライン要素はインライン ボックスを生成します。インライン ボックスはブラウザー レンダリング モデルの概念であり、表示できません。他の要素 (パディングなど) がない場合、インライン ボックスはコンテンツ領域と等しくなります。行の高さが設定されている場合、インライン ボックスの高さは変更されず、半行間隔 [(行の高さ-文字サイズ)/2]で内容に合わせてそれぞれ増減します エリア(紺色のエリア)の上下は

ラインボックス(ラインボックス)、ラインボックスとはこの行を仮想的な長方形のボックスに変換しますが、これはブラウザのレンダリング モードでの概念であり、実際には表示されません。行ボックスの高さは、この行のすべての要素の中でのインライン ボックスの最大値と等しくなります (行の高さの値が最も大きいインライン ボックスがベンチマークとして使用され、他のインライン ボックスは独自の値を使用してベンチマークに揃えられます)行ボックスの高さが最終的に計算されます) 複数の行コンテンツがある場合、各行には独自の行ボックスが存在します。

<div>
                <span>中文English</span>
                <span>中文English</span>
                <span>English中文</span>
                <span>English中文</span>
            </div>

line-height

貌似很简单，但感觉没什么用出的样子，那就让我们看看line-height的几个应用

div文字垂直居中

div居中对齐一直是个难题，水平还好解决些，margin：0 auto; 可以解决现代浏览器，IE下text-align:center。但垂直居中就没那么简单了，默认是这样子的。

<div>
                <span>This is a test.<br>
                        This is a test.
                </span>
            </div>

我们可以利用line-block这样做

<div>
                <span>This is a test.<br>
                        This is a test.
                </span>
            </div>

单行就比较简单了，把line-height设置为box的大小可以实现单行文字的垂直居中

<div>
                This is a test.
            </div>

元素对行高影响

行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。

<div>
                <span>This is a test</span>
            </div>
            <div>
                <span>This is a test</span>
            </div>

第二个span虽然因为padding原因内容区变大，当行高并未改变

行高的继承

行高是可继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。

<div>
                <p>
                    1232<br>
                    123
                </p>
            </div>

按一般理解既然line-height可以继承，那么p元素的行高也是150%了，可是事实是这样的

非但没有变成150%，反而连100%都没有，重叠了！这就是继承计算的结果，如果父元素的line-height有单位（px、%）,那么继承的值则是换算后的一个具体的px级别的值；上例p得到的是10px*150%=15px的行高，而P的字体大小为30px，所以发生了重叠。

而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

<div>
                <p>
                    1232<br>
                    123
                </p>
            </div>

所以在使用line-height时，除非你刻意否则尽量使用倍数设值

更多编程相关知识，请访问：编程教学！！

以上がCSSのline-heightプロパティの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。