CSS の高さプロパティは element_html/css_WEB-ITnose の高さを設定します

height 属性は要素の高さを設定します。注: 高さ属性には、パディング、境界線、またはマージンは含まれません。この記事では、CSS の高さの使用方法と基本的な例を、CSS コーダーを必要とするコーダーに向けて紹介します。

CSSの高さの紹介

ここでのCSSの高さとは、CSSを通じて設定したオブジェクトの高さを制御することを指します。 CSS プロパティの単語 height を使用します。単位には PX、em などが使用できます。PX (ピクセル) は HTML 単位として一般的に使用されます。

1. 高さの高さの構文

1. 基本的な高さの構文

Height:auto 高さを自動的に設定します

(通常、デフォルトの高さはコンテンツに応じて増加します。通常、高さを希望する場合はアダプティブなので設定する必要はありません)

Height:20px 高さを固定値に設定します

2. CSS の高さの使用構造

#box{height:50px}

ボックスオブジェクトボックスの高さを設定しますから 50px (ピクセル)まで

詳しい読み方: CSS 行の高さ line-height

説明: 「#box」は CSS セレクターであり、中括弧はオブジェクトの CSS スタイルを表します。

2. 高さスタイルの使用法

Height:50px はオブジェクトの高さを 50px に設定します

Height:50em はオブジェクトの高さを 50 相対長 em に設定します

通常、パーセンテージだけでは div の高さに影響しません。

詳細な読み方: html em タグ

CSS 適応高さ

一般に、幅を一定に保ち、コンテンツが増加するにつれて高さを増加させる必要があります。この時点では、この効果を実現するために高さを設定する必要はありません。同時に、高さ

adaptive を実現するために height:auto を使用する必要はありません。通常、デフォルトで高さの値を auto に設定する必要はありません。オブジェクトの高さが適応高さになります。

Px (ピクセル) が一般的に単位として使用されます

3. HTML タグに元の高さの高さ要素を設定します

1)、テーブルの高さを設定します: content< /td>

2) img 画像の高さを設定します: 画像の高さが設定されている場合、幅が設定されていない場合、画像は設定された高さに応じて自動的に縮小または拡大されます。 (拡張読み: css img)
上記の高さの値には単位がありません。単位を追加する必要はありません。デフォルトでは、単位を追加する必要はありません。 px ピクセルが長さの単位として使用されます。

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 高さの適用例

Box という名前のボックスを設定します。高さ 200 ピクセルのボックス 高さの設定の効果を視覚的に確認するために、ボックスに 1 ピクセルの赤い境界線を追加します。幅が設定されていない場合は、全画面が 100% の幅になります。 CSS の幅 width 属性を 80px に設定します。

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 クラスに高さボーナスを追加するだけで済みます。 「高さ:50%」のように高さをパーセンテージで設定することはできません。 CSS の高さと HTML の高さの違いと使い方を説明しますので、高さスタイル属性の設定と使い方をマスターしていただければ幸いです。

CSS 関連のチュートリアル:

CSS チュートリアル

CSS の概要

CSS 構文

CSS ID とクラスセレクター

CSS スタイルの作成

CSS の背景 背景の概要

CS Sスタイル

CSS フォント フォント

CSS リンク

CSS ul ol list style

CSS TABLE style

CSS box model

CSS border border

CSS アウトラインのアウトライン

CSS margin

CSS Padding パディング

グループ化とネストされたセレクター

CSS Dimension

CSS Display プロパティ

CSS Position 配置

CSS Float float

CSS 水平配置 (水平配置)

CSS 組み合わせセレクター

CSS 疑似クラス

CSS 疑似要素

CSS ナビゲーション バー

CSSドロップダウンメニュー

CSS画像ギャラリー

CSS画像の透明/不透明

CSSスプライト画像ステッチ技術

CSSメディアタイプ

CSS属性セレクター

CSSの例