CSS ディメンション
CSS 寸法プロパティ
| プロパティ | 説明 |
|---|---|
| 高さ | 要素の高さを設定します。 |
| line-height | 行の高さを設定します。 |
| max-height | 要素の最大の高さを設定します。 |
| max-width | 要素の最大幅を設定します。 |
| min-height | 要素の最小の高さを設定します。 |
| min-width | 要素の最小幅を設定します。 |
| width | 要素の幅を設定します。 |
例
画像の高さを設定するにはパーセンテージを使用してください
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:30%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" /><br>
<img class="big" src="/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" /><br>
<img class="small" src="/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" />
</body>
</html>プログラムを実行して試してください
例
セット要素の最小の高さ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
min-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>这一段的最小高度设置为100 px。</p>
</body>
</html>プログラムを実行して試してください
新しいファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:30%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" /><br>
<img class="big" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" /><br>
<img class="small" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" />
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
