ホームページ > 記事 > ウェブフロントエンド > CSSで要素の幅を設定する方法
CSSで要素の幅を設定する方法
- 青灯夜游オリジナル
- 2021-09-13 17:28:328880ブラウズ
設定方法: 1. width 属性を使用して幅を設定します (構文 "width: width value;"; 2. min-width 属性を使用して最小幅を設定します (構文 "min-width) : width value;"; 3. max-width 属性を使用して最大幅を設定します (構文「max-width: width value;」)。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
css は要素の幅を設定します
1。幅属性を使用します
width要素の幅を設定する属性。この属性は、要素のコンテンツ領域の幅を定義します。パディング、境界線、およびマージンをコンテンツ領域の外側に追加できます。
<html>
<head>
<style type="text/css">
img
{
width: 300px
}
</style>
</head>
<body>
<img src="eg_smile.gif" / alt="CSSで要素の幅を設定する方法" >
</body>
</html>レンダリング:
2. min-width 属性を使用します
min-widthプロパティは要素の最小幅を設定します。この属性値は、要素の幅の最小制限を設定します。したがって、要素は指定された値より幅が広くても構いませんが、狭くすることはできません。負の値は許可されません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.min{
min-width: 300px;
}
</style>
</head>
<body>
<textarea>文本框默认宽度</textarea><br>
<textarea class="min">文本框最小宽度300px</textarea>
</body>
</html>レンダリング:
3. max-width 属性
max-height 属性を使用して設定します。要素の最大の高さ。この属性値は、要素の高さの最大制限を設定します。したがって、要素は指定された値より短くてもかまいませんが、それより高くすることはできません。負の値は許可されません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<textarea>文本框默认宽度</textarea><br>
<textarea style="max-width: 400px;">文本框最大宽度400px</textarea>
</body>
</html>レンダリング:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで要素の幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。