Maison >interface Web >tutoriel CSS >Comment définir la largeur de l'élément en CSS
Méthode de réglage : 1. Utilisez l'attribut width pour définir la largeur, la syntaxe "width: width value;"; 2. Utilisez l'attribut min-width pour définir la largeur minimale, la syntaxe "min-width: width value;" "; 3. Utiliser max-width L'attribut définit la largeur maximale, la syntaxe est "max-width: width value;".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
css set element width
1 Utilisez l'attribut width
width pour définir la largeur de l'élément. Cet attribut définit la largeur de la zone de contenu de l'élément, et un remplissage, des bordures et des marges peuvent être ajoutés en dehors de la zone de contenu.
<html> <head> <style type="text/css"> img { width: 300px } </style> </head> <body> <img src="eg_smile.gif" / alt="Comment définir la largeur de l'élément en CSS" > </body> </html>
Rendu :
2. Utilisez l'attribut min-width
min-width pour définir la largeur minimale de l'élément. Cette valeur d'attribut définit une limite minimale sur la largeur de l'élément. Par conséquent, l’élément peut être plus large que la valeur spécifiée, mais pas plus étroit. Les valeurs négatives ne peuvent pas être spécifiées.
<!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>
Rendu :
3. Utilisez l'attribut max-width
max-height pour définir la hauteur maximale de l'élément. Cette valeur d'attribut définit une limite maximale sur la hauteur de l'élément. Par conséquent, l’élément peut être plus court que la valeur spécifiée, mais pas plus grand. Les valeurs négatives ne peuvent pas être spécifiées.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <textarea>文本框默认宽度</textarea><br> <textarea style="max-width: 400px;">文本框最大宽度400px</textarea> </body> </html>
Rendu :
(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!