ホームページ > 記事 > ウェブフロントエンド > CSSで高さと幅を設定する方法
CSSで高さと幅を設定する方法
- 青灯夜游オリジナル
- 2021-04-21 16:35:5010636ブラウズ
CSS で高さと幅を設定する方法: 1. width 属性と height 属性を使用して要素の幅と高さを設定します; 2. max-width 属性と max-height 属性を使用して最大幅を設定します要素の幅と高さ; 3. min を使用する -width 属性と min-height 属性は、要素の最小幅と高さを設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
方法 1: width 属性と height 属性を使用する
width 属性と height 属性は、要素の幅と高さを設定できます。要素のコンテンツ領域。パディング、境界線、またはマージンが含まれます。
属性値:
| 値 | 説明 |
|---|---|
| auto | デフォルト値。ブラウザは実際の幅または高さを計算できます。 |
| length | px、cm などの単位を使用して幅または高さを定義します。 |
| % | それを含むブロックレベルのオブジェクト (親要素) の幅または高さのパーセンテージに基づきます。 |
方法 2: max-width 属性と max-height 属性を使用する
max-width 属性と max-height 属性を使用して、要素の最大幅と高さ。パディング、境界線、またはマージンは含まれません。
属性値:
| 値 | 説明 |
|---|---|
| なし | ## ＃デフォルト。この定義では、要素の最大幅または高さに制限はありません。|
| length | 要素の幅または高さの最大値を定義します。|
| % | 最大幅または最大高さを、それを含むブロックレベルのオブジェクトのパーセンテージに基づいて定義します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
max-width:100px;
max-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>这一段的最大宽度设置为100 px，最大高度设置为100 px。</p>
</body>
</html>
min-width プロパティと min-height プロパティは、パディング、境界線、またはマージンを除く要素の最小幅と高さを設定します。
属性値:
| 説明 | |
|---|---|
| 要素の最小幅または最小高さを定義します。デフォルト値は 0 です。 | |
| 最小幅または最小高さを、それを含むブロックレベルのオブジェクトのパーセンテージに基づいて定義します。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
min-width:150px;
min-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>这个段落的最小宽度设置为 150px，最小高度设置为 100px。</p>
</body>
</html>
以上がCSSで高さと幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで枠線の幅を設定する方法次の記事：CSSで枠線の幅を設定する方法