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;“.
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:
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:
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:
(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!