Maison > interface Web > tutoriel CSS > Comment définir la largeur et la hauteur d'un div en CSS

Comment définir la largeur et la hauteur d'un div en CSS

青灯夜游
Libérer: 2020-12-17 14:33:09
original
5518 Les gens l'ont consulté

En CSS, vous pouvez utiliser les attributs width et height pour définir le degré et la hauteur du div. Le format de syntaxe est "div{width: value; height: value;}" ; unités telles que px, cm, etc. La longueur définie, qui peut également être définie en utilisant "%" en fonction du pourcentage de longueur de l'élément parent conteneur, ou "auto".

Comment définir la largeur et la hauteur d'un div en CSS

L'environnement d'exploitation de ce tutoriel : Système Windows 7, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

(Tutoriel recommandé : Tutoriel vidéo CSS)

En CSS, vous pouvez utiliser les attributs width et height pour définir la largeur et la hauteur d'un div.

L'attribut width définit la largeur de l'élément et l'attribut height définit la hauteur de l'élément.

Ces deux attributs définissent la largeur et la hauteur de la zone de contenu de l'élément. Le remplissage, les bordures et les marges peuvent être ajoutés en dehors de la zone de contenu ; les éléments en ligne non remplacés ignoreront ces deux attributs.

Valeur de l'attribut :

  • auto : valeur par défaut. Le navigateur peut calculer la largeur/hauteur réelle.

  • longueur : définissez la largeur/hauteur en utilisant des unités telles que px, cm, etc.

  • % : Définit le pourcentage largeur/hauteur en fonction de la largeur du bloc conteneur (élément parent).

Exemple :

Utilisez l'attribut width pour définir la largeur du div à 200 px, utilisez l'attribut height pour définir la hauteur du div à 200 px et utilisez l'attribut background pour définir la couleur d'arrière-plan sur bleu.

Comment définir la largeur et la hauteur dun div en CSS

Rendu :

Comment définir la largeur et la hauteur dun div en CSS

Supplément : Les unités de largeur et de hauteur peuvent également utiliser rem, pourcentage, etc.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal