Cet article vous apporte des connaissances pertinentes surcss, qui présente principalement des problèmes liés à la définition des attributs de hauteur et de largeur des éléments. Les attributs de hauteur et de largeur sont utilisés pour définir la hauteur et la largeur des éléments. Incluez le remplissage, les bordures ou les marges. Jetons-y un coup d'œil ensemble, j'espère que cela sera utile à tout le monde. .

(Partage vidéo d'apprentissage :tutoriel vidéo CSS,tutoriel vidéo HTML)

Réglage CSS de la hauteur et de la largeur

• Les attributs de hauteur et de largeur sont utilisés pour définir la hauteur et la largeur des éléments.

• Les propriétés de hauteur et de largeur n'incluent pas le remplissage, les bordures ou les marges. Il définit la hauteur ou la largeur de la zone située à l'intérieur du remplissage, de la bordure et des marges de l'élément.

Valeurs CSS de hauteur et de largeur

Les propriétéshauteuretlargeurpeuvent être définies sur les valeurs suivantes :height和width属性可设置如下值：

• auto- 默认。浏览器计算高度和宽度。

• length- 以 px、cm 等定义高度/宽度。

• %- 以包含块的百分比定义高度/宽度。

• initial- 将高度/宽度设置为默认值。

• inherit

initial- Définissez la hauteur/largeur sur les valeurs par défaut.

inherit- Hérite de la hauteur/largeur de sa valeur parent.

Définissez la hauteur et la largeur de l'élément

:

    
  
设置元素的高度和宽度
 
这个 div 元素的高度为 200 像素，宽度为 50%：
 
  

Copier après la connexion

Résultat de sortie :

N'oubliez pas que les attributs de hauteur et de largeur n'incluent pas le remplissage, bordure, ou marges ! Ils définissent la hauteur/largeur de la zone à l'intérieur du remplissage, des bordures et des marges de l'élément !

Set max-width

L'attribut max-width est utilisé pour définir la largeur maximale d'un élément.max-width (max-width) peut être spécifié sous forme de valeur de longueur (par exemple px, cm, etc.) ou sous forme de pourcentage (%) du bloc conteneur, ou il peut être défini sur aucun (par défaut. Ce qui signifie non largeur maximale).

Lorsque la fenêtre du navigateur est plus petite que la largeur de l'élément (500 px), le problème

Le navigateur ajoutera alors une barre de défilement horizontale à la page.

Dans ce cas, l'utilisation de max-width peut améliorer la gestion des petites fenêtres par le navigateur.

Astuce : faites glisser la fenêtre de votre navigateur jusqu'à une largeur inférieure à 500 px pour voir la différence entre les deux div !Remarque : la valeur de l'attribut max-width remplacera la largeur.

L'exemple est le suivant :

    
  
设置元素的最大宽度
 
这个 div 元素的高度为 100 像素，最大宽度为 500 像素：
 
 
请调整浏览器窗口来查看效果。
  

Copier après la connexion

Résultat de sortie : attribut de taille CSS : (Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)

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!