Propriétés de mesure CSS : hauteur, largeur et hauteur maximale/largeur maximale

Propriétés de mesure CSS : hauteur, largeur et hauteur maximale/largeur maximale, exemples de code spécifiques requis

Dans la conception et le développement Web, contrôler la taille des éléments est très important. En utilisant les propriétés de mesure CSS, nous pouvons définir précisément la hauteur et la largeur d'un élément, ainsi que la limite maximale de la taille de l'élément. Cet article présentera les propriétés de mesure couramment utilisées en CSS : hauteur, largeur, hauteur maximale et largeur maximale, et fournira des exemples de code spécifiques. L'attribut

1. height (hauteur) est utilisé pour définir la hauteur de l'élément. Peut être spécifié en utilisant des pixels (px), un pourcentage (%), des unités de fenêtre (vh) ou d'autres unités prises en charge.

Exemple de code :

.box {
  height: 200px; /* 使用像素设置高度 */
}

.container {
  height: 50%; /* 使用百分比设置高度 */
}

.header {
  height: 10vh; /* 使用视口单位设置高度 */
}

2. L'attribut width (width) est utilisé pour définir la largeur de l'élément. Semblable à la propriété height, elle peut être spécifiée à l’aide de pixels, de pourcentages, d’unités de fenêtre ou d’autres unités prises en charge.

Exemple de code :

.box {
  width: 300px; /* 使用像素设置宽度 */
}

.container {
  width: 70%; /* 使用百分比设置宽度 */
}

.sidebar {
  width: 20vw; /* 使用视口单位设置宽度 */
}

3. L'attribut max-height (hauteur maximale) est utilisé pour limiter la hauteur maximale d'un élément. Les barres de défilement s'affichent automatiquement lorsque le contenu de l'élément dépasse la hauteur maximale.

Exemple de code :

.box {
  max-height: 500px; /* 设置最大高度为500像素 */
}

.container {
  max-height: 80%; /* 设置最大高度为父元素高度的80% */
}

4. L'attribut max-width (largeur maximale) est utilisé pour limiter la largeur maximale d'un élément. Semblable à l'attribut max-height, les barres de défilement seront automatiquement affichées lorsque le contenu dépasse la largeur maximale.

Exemple de code :

.box {
  max-width: 800px; /* 设置最大宽度为800像素 */
}

.container {
  max-width: 90%; /* 设置最大宽度为父元素宽度的90% */
}

L'exemple de code ci-dessus montre comment utiliser les propriétés de mesure CSS pour contrôler la hauteur et la largeur d'un élément, ainsi que la hauteur et la largeur maximales. Ces propriétés sont très utiles, notamment dans les conceptions réactives, pour redimensionner automatiquement les éléments en fonction de différentes tailles d'appareils.

Résumé : l'attribut

• height est utilisé pour définir la hauteur d'un élément. L'attribut
• width est utilisé pour définir la largeur de l'élément. L'attribut
• max-height est utilisé pour limiter la hauteur maximale d'un élément. L'attribut
• max-width est utilisé pour limiter la largeur maximale d'un élément.

En utilisant correctement ces propriétés de mesure, nous pouvons mieux contrôler et disposer les éléments de la page Web et obtenir une meilleure expérience utilisateur. Espérons que les exemples de code contenus dans cet article aideront les lecteurs à mieux comprendre et appliquer ces propriétés.

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!