1.幅(width)
要素コンテンツ領域の幅は width 属性で設定でき、属性のオプション値は次のとおりです。
| 価値 | 説明 |
|---|---|
| auto | デフォルトでは、ブラウザーは要素の実際の幅を自動的に計算します。 |
| length | px、cm、その他の単位で特定の値を使用して幅を定義します |
| % | 親要素の幅のパーセンテージに基づいて幅を定義します |
| inherit | 親要素から width 属性の値を継承する |
ヒント: <img>タグの場合、幅属性のみが指定されている場合、高さ属性は元の画像サイズに比例してスケーリングされます。
一般に、要素の幅と高さを同時に定義するには、width 属性を height 属性と組み合わせて使用する必要があります。これは、一部の要素にはデフォルトの幅または高さが設定されていない (またはデフォルトの幅と高さが 0px である)ためです。 )、幅または高さが定義されておらず、要素にコンテンツ (子、テキストなど) がない場合、この要素の幅または高さは 0px に設定されます。外。
【例】幅属性で要素の幅を設定する場合：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-top: 5px;
margin-bottom: 5px;
}
div.box-one {
/*結果をより明確に示すために、ここで要素に上枠線と背景色を設定しています*/
border: 1px solid black;
background: #CFF;
}
span {
border: 1px solid red;
background: #CCC;
}
div.box-two {
border: 1px solid black;
background: #CFF;
width: 200px;
}
img.img-one {
width: 100px;
}
img.img-two {
width: 160px;
height: 80px;
}
</style>
</head>
<body>
<div class="box-one"></div>
<span></span>
<div class="box-two">width 属性</div>
<img src="./css.png" class="img-one">
<img src="./css.png" class="img-two">
</body>
</html> 実行結果は次の図のとおりです。
2.高さ(height)
height 属性は、要素のコンテンツ領域の高さを定義するために使用されます. 属性のオプションの値は次のとおりです:
| 価値 | 説明 |
|---|---|
| auto | デフォルトでは、ブラウザは要素の実際の高さを自動的に計算します |
| length | 特定の値を使用して px、cm、その他の単位を一致させ、高さを定義します |
| % | 親要素の高さのパーセンテージに基づいて高さを定義します |
| inherit | 親要素から width 属性の値を継承する |
ヒント: width 属性であれ、height 属性であれ、それらの値を負の数に設定することはできません。
デフォルトでは、ブラウザーは<div> 、 <p>などの一部の要素の幅を 100% に設定し、要素の高さは要素内のコンテンツに応じて決定されるため、場合によっては、要素の幅を設定する必要があります固定の幅または高さを設定します。
[例] width および height 属性を使用して、要素の幅と高さを設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
/*要素の上部線と背景色をより直感的に表示するため、ここでは要素に上部線と背景色を設定しています*/
border: 1px solid black;
background: #CFF;
width: 300px;
height: 100px;
}
p {
border: 1px solid green;
background: #CCC;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html> 実行結果は次の図のとおりです。
3.max-width & max-height
max-width 属性と max-height 属性は、要素コンテンツ領域の最大幅と最大高さをそれぞれ設定するために使用されます。 max-width および max-height 属性が定義されている場合、width または height 属性の実際の値に関係なく、width および height 属性の実際の値は max-width および max-height の値以下になります。 -高さ属性。 max-width および max-height 属性のオプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| none | 要素の最大幅または最大高さに制限がないことを意味するデフォルト値 |
| length | 要素の最大幅または高さを定義するには、px、cm、およびその他の単位で特定の値を使用します |
| % | 親要素の幅と高さのパーセンテージに基づいて、最大の幅または高さを定義します |
| inherit | 親要素から max-width または max-height 属性の値を継承する |
例として max-width 属性を取り上げます: (max-height 属性の特性は似ています)
- max-width 属性の値が width 属性より小さい場合、width 属性の値は max-width 属性と同じ値になるように再定義されます。
- max-width 属性の値が width より大きい場合、max-width 属性は無視されます。
- max-width 属性の値が min-width より小さい場合、max-width 属性は無視されます。
[例] max-width 属性と max-height 属性を使用して、要素の幅と高さの最大値を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
/*効果をより鮮明に表示するため、上枠線と背景色を設定する*/
border: 1px solid black;
background: #CFF;
max-width: 280px;
max-height: 200px;
width: 300px;
height: 180px;
}
</style>
</head>
<body>
<div>
max-width: 280px;<br>
max-height: 200px;<br>
width: 300px;<br>
height: 180px;
</div>
</body>
</html> 実行結果は次の図のとおりです。
min-width 属性と min-height 属性は、要素のコンテンツ領域の最小幅と最小高さを設定するために使用されます. min-width 属性と min-height 属性が定義されている場合, width または height 属性の実際の値に関係なくつまり、width および height 属性です。実際の値は、min-width および min-height 属性の値以上になります。 min-width および min-height 属性の可能な値は次のとおりです。
| 価値 | 説明 |
|---|---|
| length | px、cm、その他の単位で特定の値を使用して、要素の最小幅または高さを定義します。デフォルト値はブラウザによって異なります |
| % | 親要素の幅と高さのパーセンテージに基づいて、最小の幅または高さを定義します |
| inherit | 親要素から min-width 属性と min-height 属性の値を継承する |
例として min-width 属性を取り上げます: (min-height 属性の特性は似ています)
- min-width 属性の値が width より小さい場合、min-width 属性は無視されます。
- min-width 属性の値が width より大きい場合、min-width 属性の値は min-width 属性と同じ値として再定義されます。
- min-width 属性の値が max-width より大きい場合、max-width 属性は無視されます。
[例] min-width 属性と min-height 属性を使用して、要素の最小の幅と高さを設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
/*効果がよく分かるように、上辺の線と背景色を設定する*/
border: 1px solid black;
background: #CFF;
min-width: 280px;
min-height: 200px;
width: 300px;
height: 180px;
}
</style>
</head>
<body>
<div>
min-width: 280px;<br>
min-height: 200px;<br>
width: 300px;<br>
height: 180px;
</div>
</body>
</html> 実行結果は次の図のとおりです。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
