CSS基礎例行高line-height
6745 ワード
「行の高さ」は、1行のテキストの高さを指します.具体的には、2行のサブテキスト間のベースライン間の距離を指します.CSSでは、行と行間の垂直距離を制御するために使用されます.line-heightプロパティは、行ボックスのレイアウトに影響します.ブロックレベルの要素に適用すると、最大距離ではなくベースライン間の最小距離を定義します.
一、line-height文法
line-heightプロパティの具体的な定義リストは次のとおりです.
構文:line-height:normal|||inherit
説明:line-heightプロパティは行間の距離(行の高さ)を設定し、負の値は使用できません.このプロパティは、行ボックスのレイアウトに影響します.ブロックレベル要素に適用すると、最大距離ではなくベースライン間の最小距離が定義されます.line-heightとfont-sizeの計算値の差(行間)は、1つのテキスト行の内容の上部と下部にそれぞれ2つに分かれています.これらを含めることができる最小ボックスが行ボックスです.
可能な値:
値
説明
normal
デフォルトでは、行間隔を適切に設定します.
number
現在のフォントサイズに乗算して行間隔を設定する数値を設定します.倍数に相当
length
一定の行間隔を設定します.
%
現在のフォントサイズのパーセント行間隔に基づいています.
inherit
親要素からline-heightプロパティの値を継承することを指定します.
二、line-height中頂線、中線、ベースライン、ベースラインの例説明
図の説明
上から下までの4本の線はそれぞれトップ線、中線、ベースライン、ベースラインで、英語のアルファベットを勉強しているときの4線の3格に似ています.vertical-align属性にはtop、middle、baseline、bottomがあり、この4本の線と関係があることを知っています.
特にベースラインは一番下の線ではなく、一番下の線はベースラインであることを覚えています.
三、line-height中行高、行間と半行間
行の高さとは、コンテキストのローのベースライン間の垂直距離、すなわち、図中の2つの赤い線間の垂直距離を指します.
行間隔とは、1行のベースラインから次の行のトップラインまでの垂直距離、すなわち、1行目の粉線と2行目の緑線との間の垂直距離を指す.
半行間は行間の半分、すなわち領域3の垂直距離/2、領域1、2、3、4の距離の和が行高であり、領域1、2、4の距離の和がフォントsizeであるため、半行間もこのように計算することができる:(行高-フォントsize)/2
画像の説明
四、line-height中のコンテンツエリア、行内ボックス、行ボックス
コンテンツ領域:下線と上線で囲まれた領域、すなわち下図の濃い灰色の背景領域.
ライン内ボックスは、各ライン内要素が1つのライン内ボックスを生成します.ライン内ボックスはブラウザレンダリングモデルの概念で、表示できません.他の要因の影響がない場合(paddingなど)、ライン内ボックスはコンテンツ領域に等しく、ライン高を設定するとライン内ボックスの高さは変わりません.半行距離[(ライン高-フォントsize)/2]は、それぞれコンテンツ領域の上下に増加/減少します(濃い青色領域)
ラインボックス(line box)は、ブラウザレンダリングモードの概念であり、実際に表示されていない行の仮想矩形ボックスを指します.行枠の高さは、行内のすべての要素の行内枠の最大値(行の高さが最大の行内枠を基準とし、他の行内枠は独自の位置合わせで基準に位置合わせされ、最終的には行枠の高さが計算されます)に等しく、複数の行の内容がある場合、各行に独自の行枠があります.
たとえば
一、line-height文法
line-heightプロパティの具体的な定義リストは次のとおりです.
構文:line-height:normal|||inherit
説明:line-heightプロパティは行間の距離(行の高さ)を設定し、負の値は使用できません.このプロパティは、行ボックスのレイアウトに影響します.ブロックレベル要素に適用すると、最大距離ではなくベースライン間の最小距離が定義されます.line-heightとfont-sizeの計算値の差(行間)は、1つのテキスト行の内容の上部と下部にそれぞれ2つに分かれています.これらを含めることができる最小ボックスが行ボックスです.
可能な値:
値
説明
normal
デフォルトでは、行間隔を適切に設定します.
number
現在のフォントサイズに乗算して行間隔を設定する数値を設定します.倍数に相当
length
一定の行間隔を設定します.
%
現在のフォントサイズのパーセント行間隔に基づいています.
inherit
親要素からline-heightプロパティの値を継承することを指定します.
二、line-height中頂線、中線、ベースライン、ベースラインの例説明
DOCTYPE html>
<html>
<head>
<title>Testtitle>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
style>
head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;"> Englishspan>
<span style="font-size:3em;background-color:#999;">English span>
div>
div>
body>
<html>図の説明
上から下までの4本の線はそれぞれトップ線、中線、ベースライン、ベースラインで、英語のアルファベットを勉強しているときの4線の3格に似ています.vertical-align属性にはtop、middle、baseline、bottomがあり、この4本の線と関係があることを知っています.
特にベースラインは一番下の線ではなく、一番下の線はベースラインであることを覚えています.
三、line-height中行高、行間と半行間
行の高さとは、コンテキストのローのベースライン間の垂直距離、すなわち、図中の2つの赤い線間の垂直距離を指します.
行間隔とは、1行のベースラインから次の行のトップラインまでの垂直距離、すなわち、1行目の粉線と2行目の緑線との間の垂直距離を指す.
半行間は行間の半分、すなわち領域3の垂直距離/2、領域1、2、3、4の距離の和が行高であり、領域1、2、4の距離の和がフォントsizeであるため、半行間もこのように計算することができる:(行高-フォントsize)/2
画像の説明
四、line-height中のコンテンツエリア、行内ボックス、行ボックス
コンテンツ領域:下線と上線で囲まれた領域、すなわち下図の濃い灰色の背景領域.
ライン内ボックスは、各ライン内要素が1つのライン内ボックスを生成します.ライン内ボックスはブラウザレンダリングモデルの概念で、表示できません.他の要因の影響がない場合(paddingなど)、ライン内ボックスはコンテンツ領域に等しく、ライン高を設定するとライン内ボックスの高さは変わりません.半行距離[(ライン高-フォントsize)/2]は、それぞれコンテンツ領域の上下に増加/減少します(濃い青色領域)
ラインボックス(line box)は、ブラウザレンダリングモードの概念であり、実際に表示されていない行の仮想矩形ボックスを指します.行枠の高さは、行内のすべての要素の行内枠の最大値(行の高さが最大の行内枠を基準とし、他の行内枠は独自の位置合わせで基準に位置合わせされ、最終的には行枠の高さが計算されます)に等しく、複数の行の内容がある場合、各行に独自の行枠があります.
たとえば
English
English
English
English
の
、line-heightの
1、line-heightはnormalと することができる.
body { line-height:normal; }
2、line-heightは として できる
p { line-height:inherit; }
3、line-heightは1パーセントの を できます
p { line-height:120%; }
4、line-heightは1つの さ ( px、emなど)として することができる.
p { line-height:20px; }
5、line-heightは として することもできる( さえない)
p { line-height:1.2; }
、
するとtest {line-height:20px;},では、この の の さはその の に し、 がブラウザに1 されている 、このdivの の さは20 pxであり、 が2 されている 、divの の さは40 pxであり、 の の さは20 pxである. するとtest{height:40 px}では、この の の さは に の によって することはなく、 が1 に されている 、このdivの さは として40 pxであり、2 に されている 、 の の さが20 px であれば、このdivの さも の の さがheightより さいために することはありません.しかし、 の の さが40 pxより きいと、 にこのdivの さはそれに じて します.
:https://www.cnblogs.com/shawnhu/p/8301170.html