line-height_html/css_WEB-ITnose について話しましょう
Jun 24, 2016 am 11:20 AM
このスタイルの行の高さは誰もがよく知っていると思います。テキストを上下に中央揃えするためによく使用されます。これは通常、問題を引き起こしませんが、この属性にあまり慣れていない場合は問題が発生する可能性があります。いくつかの落とし穴に足を踏み入れると、私は今日それを個人的にテストし、行の高さのいくつかの特徴をまとめました。
まず、line-heightには以下のような標準的な書き方があります:
書き方1, line-height:normal; / /line-height=font-size*1.5
書き方5. line-height: 1.5; 、図に示すように:
親要素が行の高さを設定し、子要素が行の高さを設定しない場合、子要素は line- を使用することがわかります。子要素の font-height に関係なく、親要素で設定された高さは、サイズがどんなに大きくても行の高さは変更されないため、子要素の font-size > 親要素の line-height, font の場合は、行の高さは変更されません。オーバーラップしたり、その他の不要なスタイルが表示されたりする可能性があります。
上記 2 つの書き方は、図に示すように、同じ効果が得られます。 :
今度は子要素のフォント サイズを 2 倍にします
行の高さはパーセンテージで設定されます、
line-height = 200%* 親要素 font-size = 32px、子要素の行の高さは変わりません結果、フォントが重なります
数値で設定された行の高さにより、子要素の行の高さが再計算されます、
line-height=親要素の行の高さ比率*子要素のfont-size= 2*64=128px;子要素の行の高さはRecalculateになります
以下の点をまとめると
Line-heightは継承されます。
要素がピクセル値 px または em に等しい line-height を設定すると、その子要素 (行の高さが設定されていない子要素) は親要素の line-height を採用し、それ自体の line-height は変更されません。フォントサイズが大きいため、行が表示されます。
Line-height は、親要素の設定方法に基づいて、自身の行の高さを再計算するかどうかを決定します。つまり、書き方4と5の違いです ここまでで行の高さについてはある程度理解できたと思います

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?
