最近、CSS インターフェースに取り組んでいるときに、line-height と height という 2 つの属性によく遭遇しました。これまで、これらの属性の意味をまったく理解していませんでした。今日、時間をかけてオンラインで調べたところ、ある程度理解できました。 https://blog.csdn.net/a2013126370/article/details/82786681 このブロガーは非常によく書いています。少なくとも、line-height と height についてより深く理解できました。学ぶ価値はあります。 1. 基本的な概念 1. 行の高さは、テキスト行のベースライン間の垂直距離を指します(行間隔とも呼ばれます)。 2. 行間隔は、前の行の下の行と次の行の上端の行の間の距離です。 私の個人的な理解からすると、次のような結論を導き出すことができます。 1. div の height 属性が設定されていない場合、div の高さは line-height のサイズに応じて変化し、font-size の影響を受けません。 2. 高さは、img の高さ、div の高さなど、要素の高さを設定するために使用されます。 line-height プロパティは行間隔 (行の高さ) を設定するために使用しますが、これら 2 つは同じ概念ではありません。 2. コード例 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>sdds</title> <スタイル> html、本文、div{ マージン: 0; パディング: 0; 境界線: 0; } .bg0{ 幅: 200ピクセル; 高さ: 45px; 行の高さ: 100px; 背景色: 赤; フォントサイズ: 10px; 単語折り返し:単語区切り; } .bg1{ 幅: 200ピクセル; 高さ: 10px; 背景色: 緑; } .bg2{ 幅: 200ピクセル; 高さ: 45px; 背景色: 黄色; } .bg3{ 幅: 200ピクセル; 高さ: 55px; 背景色: 青; } </スタイル> </head> <本文> <div class="bg0">上海大学(SHU)は211の大学です</div> <div class="bg1"></div> <div class="bg2"></div> <div class="bg3"></div> </本文> </html> 実行結果: 結論: 黄色の背景の div と青色の背景の div の高さの合計は、クラス名 bg0 の div に設定された line-height=100px であり、赤色の div の最初の部分に設定された height=45px は、line-height から fontsize を減算して 2 で割ることによって取得される、つまり (100-10)/2=45px であることがわかります。 上記はCSSのline-heightとheightの詳しい説明です。CSSのline-heightとheightについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください! |
<<: AWSサーバーリソースを無料で使用する方法を教えます
>>: PSを使用して2分でxhtml+cssウェブサイトのホームページを作成します
1: <a> タグを使用してページにリンクする場合、target 属性の役割は誰もが知っ...
序文MySQL に関する私の理解に基づくと、パフォーマンスの最適化作業やマスター スレーブ レプリケ...
最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...
MySQL をインストールすると初期パスワードが与えられますが、この初期パスワードは大文字と小文字の...
最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...
CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...
DOSBox を使用すると、Windows で DOS をシミュレートし、楽しい作業を行うことができ...
別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...
序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...
1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...
Vue $set 配列コレクションオブジェクトの割り当てVue カスタム配列オブジェクト コレクショ...
<meta http-equiv="X-UA-compatible" co...
この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...
Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...
目次iframeの外側のiframeのコンテンツを取得する方法1方法2 iframe 内の ifra...