CSS サイズのプロパティ

Web ページの作成プロセス中に、要素の高さ、幅、間隔などを設定する必要がある場合があります。そのためには、いくつかの Dimension 属性を使用する必要があります。

1. height属性

height属性は要素の高さを設定できます。

継承: いいえ

可能な値


値。ブラウザは実際の高さを計算します。

長さ px や cm などの単位を使用して高さを定義します。

% それを含むブロックレベルのオブジェクトの高さのパーセンテージに基づきます。


2. line-height属性

line-height属性は行間の距離を設定できます。

注: 負の値は許可されません。 E 継承: はい承 可能な値

説明

通常のデフォルト。適切な行間を設定します。


数値 現在のフォントサイズに乗じて行間を設定する数値を設定します。

length 固定の行間隔を設定します。 % 現在のフォント サイズに基づく行間隔のパーセント。

3. max-height 属性

max-height 属性は、要素の最大の高さを設定できます。 intinheritance:可能性のある値


value。この定義では、要素に許可される最大高さに制限はありません。

length は要素の高さの最大値を定義します。

% は、最大の高さを、それを含むブロックレベルのオブジェクトのパーセンテージとして定義します。


4. max-width 属性

max-width は要素の最大幅を定義できます。

継承: いいえ

可能な値


Value 説明

none デフォルト。この定義では、要素の最大幅に制限はありません。

length は要素の最大幅を定義します。

% は、最大幅を、それを含むブロックレベルのオブジェクトのパーセンテージとして定義します。


5. min-height 属性

min-height 属性は要素の最小の高さを設定できます。

継承: いいえ

可能な値


値説明

長さを定義します。要素の最小の高さ。デフォルト値は 0 です。

% 最小の高さを、それを含むブロックレベルのオブジェクトのパーセンテージに基づいて定義します。


6. min-width 属性

min-width 属性は要素の最小幅を設定できます。

継承: いいえ

可能な値

Value 説明

length 要素の最小幅値を定義します。デフォルト: ブラウザによって異なります。

% は、それを含むブロックレベルのオブジェクトのパーセンテージに基づいて最小幅を定義します。


7. width 属性

width 属性は要素の幅を設定できます。

継承: いいえ

可能な値

Value 説明

auto デフォルト。ブラウザは実際の幅を計算できます。

% 親要素の幅に基づいて幅をパーセントで定義します。

length px、cm、その他の単位を使用して幅を定義します。


インスタンス:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="95" height="84" /><br>
<img class="big" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="120" height="90" />
<p class="ex">这是一段句子的高和宽是 100px.</p>
</body>
</html>


インスタンス: りー






学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style type="text/css"> img.normal { height:auto; } img.big { height:50%; } p.ex { height: 30%; width: 40%; } </style> </head> <body> <img class="normal" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="195" height="184" /><br> <img class="big" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="120" height="90" /> <p class="ex">昨日香港银行同业人民币拆借利率出现明显飙升,隔夜离岸人民币Hibor涨82个基点报2.8284%, 创9月21日以来新高;一周离岸人民币Hibor涨262个基点报6.7610%,创9月20日以来新高,意味着离岸人民币流动性吃紧。</p> </body> </html>