Les propriétés de taille CSS font référence aux propriétés de largeur et de hauteur des éléments. Bien que ce soit très simple, c'est une compétence qui doit être maîtrisée. CSS fournit plusieurs attributs tels que width, height, max-width, min-width, max-height et min-height pour définir la largeur et la hauteur des éléments. Ces éléments sont très simples à utiliser. Présentons-les brièvement ci-dessous.
1.hauteur
(1) Définir la hauteur de l'élément : attribut height
Hauteur : propriété spécifie la hauteur d'un élément.
① Champ d'application et objets d'application : zone de contenu par défaut
Objets applicables : tous les éléments
éléments en ligne non remplacés, colonnes de tableau, groupes de colonnes
Champ d'application : Par défaut, cet attribut détermine la hauteur de la zone de contenu.
② Modifier le champ d'application :
Si box-sizing est défini sur border-box, cette propriété détermine la hauteur de la zone de bordure.
③ Sans objet
Éléments en ligne non remplacés : cet attribut est ignoré.
Éléments en ligne : impossible de définir la hauteur.
④ Remplacement de la valeur d'attribut
Les propriétés min-height et max-height remplacent la hauteur.
(2) Niveau élevé de grammaire
hauteur : auto|longueur|%|hériter ;
Contient des valeurs d'attribut expérimentales : [ <length> | <percentage> ] && [ border-box | content-box ] ?
/*Valeur du mot-cléKeywordvalue*/height:auto;/*Valeur de longueur<length>values*/height:120px;height:10em;/*Valeur en pourcentage<percentage>value*/height:75%;/*Mot-clé global ValueGlobalvalues*/ hauteur: hériter; hauteur: initiale; hauteur: non définie;
2.largeur
(1) Définir la largeur de l'élément : attribut width
① Zone applicable
Zone de contenu : par défaut, il définit la largeur de la zone de contenu.
Non inclus : vous pouvez ajouter un remplissage, des bordures et des marges en dehors de la zone de contenu.
Modifiez la zone applicable : Mais si box-sizing est défini sur border-box, cela définit la largeur de la zone de bordure.
② Éléments applicables
Tous les éléments sauf les éléments suivants
Éléments non applicables : éléments en ligne non remplacés, lignes de tableau et groupes de lignes
Les éléments en ligne non remplacés ignoreront cet attribut.
③ Couverture
Les propriétés min-width et max-width peuvent remplacer la largeur.
(2) Syntaxe de la largeur
largeur : auto | longueur| %|
Contient des valeurs d'attribut expérimentales : [ <length> | <percentage> ] && [ border-box | content-box ] ?
/*Valeur de longueur<length>values*/width:300px;width:25em;/*Valeur de pourcentage<percentage>value*/width:75%;/*Valeur de mot-clé Keywordvalues*/width:25emborder-box;width:75 % content-box;largeur:max-content;largeur:min-content;largeur:disponible;largeur:fit-content;largeur:auto;/*Valeurs globalesGlobalvalues*/largeur:inherit;largeur:initial;largeur:unset;
3. largeur maximale et hauteur maximale
Les attributs max-width et max-height sont utilisés pour définir respectivement la largeur maximale et la hauteur maximale de la zone de contenu de l'élément. Lorsque les propriétés max-width et max-height sont définies, les valeurs réelles des propriétés width et height seront inférieures ou égales aux valeurs des propriétés max-width et max-height, quelle que soit la valeur réelle. valeurs des propriétés width ou height. Les valeurs facultatives pour les propriétés max-width et max-height sont les suivantes :
Prenons l'exemple de l'attribut max-width : (les caractéristiques de l'attribut max-height sont similaires)
(1) Lorsque la valeur de l'attribut max-width est inférieure à l'attribut width, la valeur de l'attribut width sera redéfinie à la même valeur que l'attribut max-width ;
(2) Lorsque la valeur de l'attribut max-width est supérieure à width, l'attribut max-width sera ignoré ;
(3) Lorsque la valeur de l'attribut max-width est inférieure à min-width, l'attribut max-width sera ignoré.
4.min-largeur et min-hauteur
Les attributs min-width et min-height sont utilisés pour définir la largeur minimale et la hauteur minimale de la zone de contenu de l'élément. Lorsque les attributs min-width et min-height sont définis, quelle que soit la valeur réelle de l'attribut width ou height, les attributs width et height Les valeurs réelles seront supérieures ou égales aux valeurs des propriétés min-width et min-height. Les valeurs facultatives pour les propriétés min-width et min-height sont les suivantes :
Prenons l'exemple de l'attribut min-width : (l'attribut min-height a des caractéristiques similaires)
(1) Lorsque la valeur de l'attribut min-width est inférieure à width, l'attribut min-width sera ignoré ;
(2) Lorsque la valeur de l'attribut min-width est supérieure à la largeur, la valeur de l'attribut min-width sera redéfinie à la même valeur que l'attribut min-width ;
(3) Lorsque la valeur de l'attribut min-width est supérieure à max-width, l'attribut max-width sera ignoré.