ホームページ > 記事 > ウェブフロントエンド > CSS の高さプロパティは element_html/css_WEB-ITnose の高さを設定します
height 属性は要素の高さを設定します。注: 高さ属性には、パディング、境界線、またはマージンは含まれません。この記事では、CSS の高さの使用方法と基本的な例を、CSS コーダーを必要とするコーダーに向けて紹介します。
ここでのCSSの高さとは、CSSを通じて設定したオブジェクトの高さを制御することを指します。 CSS プロパティの単語 height を使用します。単位には PX、em などが使用できます。PX (ピクセル) は HTML 単位として一般的に使用されます。
1. 基本的な高さの構文
Height:auto 高さを自動的に設定します
(通常、デフォルトの高さはコンテンツに応じて増加します。通常、高さを希望する場合はアダプティブなので設定する必要はありません)
Height:20px 高さを固定値に設定します
2. CSS の高さの使用構造
#box{height:50px}
ボックスオブジェクトボックスの高さを設定しますから 50px (ピクセル)まで
詳しい読み方: CSS 行の高さ line-height
説明: 「#box」は CSS セレクターであり、中括弧はオブジェクトの CSS スタイルを表します。
2. 高さスタイルの使用法
Height:50em はオブジェクトの高さを 50 相対長 em に設定します
通常、パーセンテージだけでは div の高さに影響しません。
詳細な読み方: html em タグ
CSS 適応高さ
一般に、幅を一定に保ち、コンテンツが増加するにつれて高さを増加させる必要があります。この時点では、この効果を実現するために高さを設定する必要はありません。同時に、高さ
adaptive を実現するために height:auto を使用する必要はありません。通常、デフォルトで高さの値を auto に設定する必要はありません。オブジェクトの高さが適応高さになります。
Px (ピクセル) が一般的に単位として使用されます
3. HTML タグに元の高さの高さ要素を設定します
Htmlオリジナルの高さ属性とCSSの高さの比較
以前はhtmlがtableタグにwidth="300"を埋め込んで高さを直接設定していたため、単位は必要ありませんでした。デフォルトの単位はpx(ピクセル)でした。
table tr td テーブルの高さスタイル設定例 HTML コード:
<table> <tr> <td height="100">我的高度为100px</td> </tr> <tr> <td height="50">我高度为50px</td> </tr> </table>
それぞれ高さ 100px と 50px のテーブルを 2 行設定します
4. CSS 高さの適用例
1. 高さの場合の CSS コード:
#box{height:200px;border:1px solid #F00;width:80px}
/* CSS コメントの説明: 赤の CSS ボーダーを設定、高さ 200px、幅 80px */
2. 高さの場合の HTML ソース コード スニペット:
<div id="box">我高度为200px</div>
5. CSSの高さの概要
CSS 関連のチュートリアル:
CSS チュートリアル