ホームページ > 記事 > ウェブフロントエンド > CSSのhight属性の詳しい説明
CSSのhight属性の詳しい説明
- 迷茫オリジナル
- 2017-03-25 14:12:142681ブラウズ
ディレクトリ構造:
コンテンツ構造[-]
hight属性値型リスト
| 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」を押して「要素」を選択すると、e388a4556c0f65e1904146cc1a846bee の高さが親要素であることがすぐにわかります。本体＞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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSを使用して区切り線を実装する方法次の記事：CSSを使用して区切り線を実装する方法