ホームページ >ウェブフロントエンド >htmlチュートリアル >パーセンテージとしての line-height 属性値と数値積の違い function_html/css_WEB-ITnose
パーセンテージとしての line-height 属性値と数値積の違い function_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:041402ブラウズ
パーセンテージとしての line-height 属性値と数値積因数の違い:
この章では、line-height 属性の具体的な使用法は紹介しませんが、パラメーターがパーセンテージであり、数値の場合の違いのみを紹介します。数値積因数。
line-height の基本的な使用法については、line-height 属性の詳細な紹介を参照してください。
line-height 属性値をパーセントと数値積係数に設定する場合も同様です。たとえば、200% と 2 を指定すると、line-height 属性値を現在の要素のフォント サイズの 2 倍に設定できます。メソッドが 2 つありますか? パラメータ値は少し冗長ですが、冗長ではありません。
次のコード例を見てください:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#top{ width:300px; background:#CCC; line-height:2; font-size:12px; margin:5px;}#top .inner{ font-size:18px;}#bottom{ width:300px; background:#CCC; line-height:200%; font-size:12px; margin:5px;}#bottom .inner{ font-size:18px;}</style></head><body><div id="top"> <div class="inner">蚂蚁部落一</div></div><div id="bottom"> <div class="inner">蚂蚁部落二</div></div></body></html> 上記のコードでは、明らかに上下の行の高さに差があります。その違いを紹介しましょう。
パーセンテージを使用する場合、行の高さは現在の要素のフォント サイズに基づいて計算されます。このとき、行の高さは固定されており、次のサブ要素はこの固定の行の高さを継承します。コード、最上部の外側の都市 div 行の高さはパーセンテージを通じて 24px として計算され、その子要素はこの固定値を継承し、子要素のフォントに基づいて計算されなくなります。数値積係数を使用する場合、子要素はこの係数を継承するため、行の高さは子要素のフォント サイズに基づいて計算されます。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15900
詳細については、以下を参照してください: http://www.softwhy.com/divcss/