ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の高さプロパティは element_html/css_WEB-ITnose の高さを設定します

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

WBOY
WBOYオリジナル
2016-06-24 11:18:061227ブラウズ

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)、テーブルの高さを設定します: 41121ebd3f7e14f46b91bf5c35911743contenta81893d391bf0f432cef95e9d634b5fc 画像の高さが設定されている場合、幅が設定されていない場合、画像は設定された高さに応じて自動的に縮小または拡大されます。 (拡張読み: 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の例
  • 声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。