Maison >interface Web >tutoriel CSS >Comment définir la largeur de l'élément en CSS

Comment définir la largeur de l'élément en CSS

青灯夜游
青灯夜游original
2021-09-13 17:28:328935parcourir

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;".

Comment définir la largeur de l'élément en CSS

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 :

Comment définir la largeur de lélément en CSS

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 :

Comment définir la largeur de lélément en CSS

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 :

Comment définir la largeur de lélément en CSS

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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn