La propriété de hauteur dans CSS expliquée
Comme la hauteur est l'une des actions les plus proches du rembourrage, de la bordure et des marges. Cependant, ni cela ne les affecte ni n'obtient un effet. Ce guide descriptif fournit le fonctionnement et l'utilisation de la propriété de hauteur dans CSS avec les résultats d'apprentissage suivants:
- fonctionnement de la propriété de hauteur dans CSS
- Utilisation de la propriété de hauteur dans CSS
- la différence entre la hauteur et la hauteur max / min-hauteur
Comment fonctionne la propriété de hauteur dans CSS
Le fonctionnement de la propriété de hauteur dans CSS dépend de la syntaxe présentée ci-dessous:
sélecteur hauteur: valeur;Le sélecteur peut être n'importe quel élément ou peut se référer à la classe CSS dans la feuille de style. La valeur de la hauteur peut être définie dans diverses unités de mesure indiquées ci-dessous;
Longueur: la longueur (longueur verticale) peut être définie dans des unités telles que PX, EM, etc. Le PX est la valeur statique tandis que l'EM varie en fonction de la valeur par défaut de l'élément parent. Comme si la hauteur du corps est définie sur 20px (par défaut par défaut), il serait équivalent à 1EM.
Auto: cette valeur ajuste la hauteur en fonction du paramètre par défaut du navigateur
pourcentage (%): le pourcentage de l'élément principal est considéré comme référence. Par exemple, la valeur de 50% ajusterait la hauteur à 50% (selon la hauteur de l'élément parent.)
Initial: cela utilise la valeur de hauteur par défaut
Héritage: cette valeur récupère la hauteur de l'élément parent
Le fonctionnement de la propriété de hauteur dans CSS dépend majoritairement de l'unité de mesure utilisée.
Comment utiliser la propriété de hauteur dans CSS
Cette section fournit plusieurs exemples qui démontrent la fonctionnalité de la propriété de hauteur dans CSS.
Exemple 1: Utilisation de la longueur / pourcentage de la propriété de hauteur
Cet exemple utilise la valeur de longueur avec diverses unités de mesure et le code suivant est pratiqué à cet égard.
Réglage de la hauteur (en utilisant la longueur et le pourcentage)
La hauteur est en px
La hauteur est en pourcentage (%)
Hauteur en em
La description du code est fournie ci-dessous:
- a créé trois classes CC nommées «Prim», «SEC» et «ter»
- La classe «Prim» considère la hauteur dans «PX», tandis que les classes «SEC» et «ter» utilisent «%» et «em» pour la longueur de hauteur (verticale)
- Les trois classes CSS sont utilisées dans trois paragraphes (qui sont créés dans le corps)
L'image du code ci-dessus est illustrée ci-dessous,
Sortir:
Exemple 2: Utilisation de l'auto, de l'héritage et des valeurs initiales de la propriété de hauteur
Cet exemple pratique les valeurs automatiques, héritées et initiales de la propriété de hauteur dans CSS. Pour ce faire, le code fourni ci-dessous est pratiqué
Réglage de la hauteur
La hauteur est définie sur la valeur initiale
La hauteur est héritée
Hauteur en auto
La description du code est indiquée ci-dessous:
- Un élément CSS pour «div» est créé (car il serait utilisé comme élément parent)
- Trois classes CSS «INI», «inh» et «aut» sont utilisées qui seraient utilisées pour les valeurs de hauteur (initial, hérité et auto)
- Un paragraphe utilise la classe «INI» tandis que le paragraphe utilisant la classe «inh» est contenu à l'intérieur d'une div et que le troisième paragraphe utilise la classe CSS «auto»
L'image du code ci-dessus s'affiche ci-dessous
Sortir:
Exemple 3: Utilisation de la hauteur avec max-height et min-height
Différencions le fonctionnement de la propriété de hauteur des propriétés max-hauteur / min-hauteur en utilisant le code écrit ci-dessous.
Réglage de la hauteur
Hauteur avec une hauteur maximale
Hauteur avec mine-hauteur
La description du code est
- Deux classes CSS sont créées nommées «HX» et «HN»
- La classe «HX» contient les propriétés «hauteur» et «max-hauteur»
- La classe «HN» considère les propriétés «min-hauteur» et «hauteur»
- La classe «HX» est associée au premier paragraphe tandis que la classe «HN» est utilisée dans le deuxième paragraphe.
L'image du code est fournie ci-dessous
Sortir:
Il est observé à partir de la sortie que la propriété max-height a dominé la propriété de hauteur et la propriété Min-Height a dominé la propriété de hauteur.
En parcourant les exemples, nous avons fourni les fonctionnalités de la hauteur de la hauteur et avons également décrit son comportement en l'utilisant avec des propriétés max / min-hauteur.
Conclusion
La propriété de hauteur dans CSS ajuste la hauteur (longueur verticale) de l'élément. Cet article fournit le fonctionnement et l'utilisation de la propriété de hauteur dans CSS. La propriété de hauteur n'est pas effectuée par la frontière / marge / rembourrage, mais il peut être influencé par la propriété max-hauteur et min-height de CSS. Nous avons fourni quelques exemples qui utilisent la hauteur avec une hauteur min / max-hauteur, et il est conclu que la propriété de hauteur doit être utilisée seule (pas avec une hauteur max / min).