ベースラインからの二行
インライン要素p要素の高さは、行の高さによって決定されます
どの2つの行の行の高さはどこにありますか？
どこでも継承された高い性行為のため、
コンテンツ領域のフォントサイズにのみ関連性の高いです
SIMSAMフォントの下で
行の高さ=行間隔、フォントサイズ+
ライン-heightプロパティは次の値をサポートしています。
現在のフォントsize12pxの場合
ブラウザに関連付けられた通常のデフォルトのフォントとブラウザクローム通常のフォントサイズ=値/ 100 = 0.12の下
受け継ぎます
直接長さ12ピクセル
数は、三行36px高さに設定されている場合
パーセント50％12 * 50％=計6Px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .Number{ font-size:100px; line-height: 150%;/*100px*150%=150px 此方法获取的行高将继承给子元素 30px*/ } .Number>p{ font-size:44px; } .Percent{ font-size:100px; line-height: 1.5;/*100px*1.5=150px 在子元素当中还会计算一次*/ } .Percent>p{ font-size:44px;/*44px*1.5=66px */ } </style> </head> <body> <div class="Number"> <p>根据自身文字大小计算行高</p> <p>根据自身文字大小计算行高</p> </div> <span style="display: block;width:100%;height:1px;background:red"></span> <div class="Percent"> <p>根据自身文字大小计算行高</p> <p>根据自身文字大小计算行高</p> </div> </body> </html>
