Heim  >  Artikel  >  Web-Frontend  >  So legen Sie die Elementbreite in CSS fest

So legen Sie die Elementbreite in CSS fest

青灯夜游
青灯夜游Original
2021-09-13 17:28:328880Durchsuche

Einstellungsmethode: 1. Verwenden Sie das width-Attribut, um die Breite festzulegen, die Syntax „width: width value;“ 2. Verwenden Sie das min-width-Attribut, um die minimale Breite festzulegen, die Syntax „min-width: width value;“ "; 3. Verwenden Sie max-width. Das Attribut legt die maximale Breite fest. Die Syntax lautet „max-width: Breitenwert;“.

So legen Sie die Elementbreite in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css set element width

1 Verwenden Sie das width-Attribut

width-Attribut, um die Breite des Elements festzulegen. Dieses Attribut definiert die Breite des Inhaltsbereichs des Elements und Auffüllungen, Rahmen und Ränder können außerhalb des Inhaltsbereichs hinzugefügt werden.

<html>
<head>
<style type="text/css">
img
{
width: 300px
}
</style>
</head>
<body>

<img  src="eg_smile.gif" / alt="So legen Sie die Elementbreite in CSS fest" >

</body>
</html>

Rendering:

So legen Sie die Elementbreite in CSS fest

2 Verwenden Sie das Attribut „min-width“

min-width, um die Mindestbreite des Elements festzulegen. Dieser Attributwert legt eine Mindestgrenze für die Breite des Elements fest. Daher kann das Element breiter als der angegebene Wert sein, jedoch nicht schmaler. Negative Werte sind nicht zulässig.

<!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>

Rendering:

So legen Sie die Elementbreite in CSS fest

3. Verwenden Sie das Attribut max-width

max-height, um die maximale Höhe des Elements festzulegen. Dieser Attributwert legt eine maximale Grenze für die Höhe des Elements fest. Daher kann das Element kürzer als der angegebene Wert, aber nicht höher sein. Negative Werte sind nicht zulässig.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  	<textarea>文本框默认宽度</textarea><br>
    <textarea style="max-width: 400px;">文本框最大宽度400px</textarea>
  </body>
</html>

Rendering:

So legen Sie die Elementbreite in CSS fest

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo legen Sie die Elementbreite in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn