line-height理解

1.line-heightの意味
2行のテキストベースライン間の高さ距離
2.line-height属性値
2.1概要(normal-number-length-percent-inherit)
.1 normalのデフォルトは、ブラウザに従い、要素フォントに関連付けられています..2 number行の高さ=現在のフォントサイズ*数値
現在の要素のfont-sizeサイズから計算:文字サイズfont-sizeが20画素であると仮定すると、実際の行高画素値:line-height=1.5*20 px=30 px;
.3 length長さの値、固定または相対単位で.4 percent行の高さ=現在のフォントサイズ*パーセント
このline-heightプロパティが設定されている要素に対するfont-sizeサイズの計算仮定:line-height=150%;文字サイズが20 pxの場合、行高line-height=150%*20=30 pxとなります.
5 inherit親要素から行の高さを継承します.IE8+.
たとえば、inputボックスなどの要素のデフォルト行の高さはnormalで、inheritを使用するとテキストボックスのスタイルの制御性が向上します.
2.2使用率、emと数値の差
計算に差がない
line-height:1.5. すべての継承可能な要素はfont-sizeに基づいて行の高さを再計算します.line-height:150%/1.5em. 現在の要素はfont-sizeに基づいて行の高さを計算し、次の要素に継承する.(親要素は行の高さを計算して子要素に継承されます)
推奨方法:数値を使用します.
2.3 bodyグローバル数値行高使用経験
body{font-size:14px; line-height:?}
推奨:20ピクセル(bodyデフォルトフォント*line-height=20 px)の使用にマッチし、計算に便利
line-height=20px/14px=1.42857(14……)
chromeブラウザは19 pxに高度に一致するため、1.4286を使用します.
body{font-size:14px; line-height:1.4286;} 略語:body{font-size:14 px/1.4286'microsoft yahei'}
3.line-heightと画像表現
1.行の高さは画像の高さに影響しません
行の高さと図文の混在
画像は文字ベースラインbaselineに位置合わせされるので、画像の下に隙間があります.文字がなくても、画像の下の縁には隙間があります.why? **「テキストノードを隠す」**見えない文字ですが、実際には存在しないline-heightがコンテナの高さに影響します.
2.画像の底の隙間をなくす3つの方法
1.画像ブロック化img{display:block;}
2.画像の下線位置合わせimg{vertical-align:bottom;}
3.line-heightは十分小さい-ベースラインの位置を上に移動する.box {line-height:0;}
小さい画像と大きい文字は基本的に高さが行の高さによって制御されます
4.行高の実用化
サイズが固定されていない画像、複数行の文字が垂直に中央に配置されています.
4.1画像の水平垂直中央IE8+ .box { line-height:300px; text-align:cneter;} .box>img {vertical-align:middle}
middleを使用すると、実際には完全に垂直に中央に位置することはできません.ベースラインの高さは1/2xです.異なるフォントは四線で完全に同じではなく、沈んだものと偏ったものがある.
4.2複数行のテキストは水平垂直中央を実現するIE8+ .box{line-height:250px; text-align:center;} .box>.text { display:inline-block; line-height:normal; text-align:left; vertical-align:middle; max-width:100%; }行以上の文字が水平垂直に中央に並んで実現される原理上の画像は、テキストが存在するコンテナのdisplayレベルが画像と同じ、すなわちinline-blockに変換され、外部から継承されたtext-alignとvertical-alignの値がリセットされることを区別して実現される.
4.3 heightの代わりに、IE 6/7のhaslayoutを避ける
ie 6/7で高さを設定するとhaslayoutが発生し、親要素の高さを突き破ります.
ie 6/7で高さを設定する正しい書き方:height:36 px;line-height:36px;
間違った書き方:{height:36 px;line-height:36 px;}その中のheightはもう余計だ
慕课网-张鑫旭