ホームページ > 記事 > ウェブフロントエンド > CSSの幅と高さのプロパティの詳細な説明
CSSの幅と高さのプロパティの詳細な説明
- WBOYオリジナル
- 2022-08-02 17:44:553879ブラウズ
この記事では、css に関する関連知識を提供します。主に、要素の高さと幅の属性の設定に関する関連問題を紹介します。高さ属性と幅属性は、要素の高さと幅を設定するために使用されます。高さと幅のプロパティには、パディング、境界線、またはマージンは含まれません。一緒に見てみましょう。皆さんのお役に立てれば幸いです。 .
(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)
CSS の高さの設定および width
height プロパティと width プロパティは、要素の高さと幅を設定するために使用されます。
高さと幅のプロパティには、パディング、境界線、またはマージンは含まれません。要素のパディング、境界線、およびマージン内の領域の高さまたは幅を設定します。
#CSS の高さと幅の値
##height および width プロパティは次の値に設定できます:
- auto
- デフォルト。ブラウザは高さと幅を計算します。
- #length
- 高さ/幅を px、cm などで定義します。
- %
- 高さ/幅を、含まれるブロックのパーセンテージとして定義します。
- #initial
- 高さ/幅をデフォルト値に設定します。
- inherit
- 親の値から高さ/幅を継承します。
##例は次のとおりです:
高さと幅のプロパティには、パディング、境界線、またはマージンが含まれないことに注意してください。要素のパディング、境界線、およびマージン内の領域の高さ/幅を設定します。 Set max-width ##css サイズ属性: 、<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的高度和宽度</h1>
<p>这个 div 元素的高度为 200 像素，宽度为 50%：</p>
<div></div>
</body>
</html>出力結果:
max-width 属性は、要素の最大幅を設定するために使用されます。
max-width (最大幅) は、長さの値 (px、cm など) または含まれるブロックのパーセンテージ (%) として指定できます。あるいは、なしに設定することもできます (デフォルト。最大幅がないことを意味します）。 ブラウザ ウィンドウが要素の幅 (500px) より小さい場合、前述の <!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的最大宽度</h1>
<p>这个 div 元素的高度为 100 像素，最大宽度为 500 像素：</p>
<div></div>
<p>请调整浏览器窗口来查看效果。</p>
</body>
</html>出力結果:
#(学習ビデオ共有:
css ビデオ チュートリアル
html ビデオ チュートリアル
以上がCSSの幅と高さのプロパティの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。