ディレクトリ構造:
コンテンツ構造[-]
| value | description |
| auto | デフォルト |
| 長さ | 絶対長さ |
| % | 相対長さ |
| 継承 | 継承 |
ここでは主に相対的な長さの使い方について紹介します。絶対的な長さの読者は、CSS サイズ単位 px % em rem の詳細な説明を参照してください。
この値は、それを含むブロックレベル要素のパーセンテージに基づくパーセンテージです。
<!DOCTYPE html><html>
<head>
<title>height.html</title>
<meta name="content-type" content="text/html; charset=UTF-8"><style>p{
width:50%;
height:50%;
border:1px solid red;}body{
border:1px solid green;
display:block;
height:100px;}</style></head><body><p>I am box with width 50% and height 50%</p></body></html>読者は、Chrome ブラウザで「F12」を押して「要素」を選択すると、 の高さが親要素であることがすぐにわかります。本体＞50％。
注意事項
上記の例では、高さの相対値の使用方法を検証しました。ただし、親要素で高さが定義されていない場合、絶対値で変更しない限り、パーセントを使用した子要素の高さは機能しないことに注意してください。 。ここでheightが定義されていないということは、高さがまったく書かれていないことを意味し、高さを0pxと定義するのとは異なります。読者は次のコードを試すことができます:
<body id="b" style="width:0px;height:0px;"> <br> <p id="er" style="width:50%;height:50%;border:1px solid red;"></p>
次に、本文の style 属性を削除して、もう一度試してください。
りー以上がCSSのhight属性の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
