CSSで要素の幅を設定する方法-CSSチュートリアル-php.cn

CSSで要素の幅を設定する方法

青灯夜游

リリース： 2023-01-11 09:19:56

オリジナル

8932 人が閲覧しました

設定方法: 1. width 属性を使用して幅を設定します (構文 "width: width value;"; 2. min-width 属性を使用して最小幅を設定します (構文 "min-width) : width value;"; 3. max-width 属性を使用して最大幅を設定します (構文「max-width: width value;」)。

CSSで要素の幅を設定する方法

このチュートリアルの動作環境: 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>

ログイン後にコピー

レンダリング:

CSSで要素の幅を設定する方法

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>

ログイン後にコピー

レンダリング:

CSSで要素の幅を設定する方法

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で要素の幅を設定する方法