Maison > interface Web > tutoriel CSS > Comment définir la largeur d'un div avec CSS

Comment définir la largeur d'un div avec CSS

王林
Libérer: 2023-01-06 11:13:57
original
6899 Les gens l'ont consulté

La façon de définir la largeur d'un div avec CSS est d'ajouter l'attribut width au div et de définir la valeur de l'attribut sur une valeur appropriée, telle que [width:100px;]. Nous pouvons également définir le pourcentage de largeur du div, tel que [width:50%;].

Comment définir la largeur d'un div avec CSS

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

En fait, il est très simple pour nous de définir la largeur d'un div, car il existe un attribut width prêt à l'emploi en CSS, qui est utilisé pour définir la largeur de l'élément.

Valeur de l'attribut :

  • auto Valeur par défaut. Le navigateur peut calculer la largeur réelle.

  • longueur Définissez la largeur en utilisant des unités telles que px, cm, etc.

  • % Définit la largeur sous forme de pourcentage en fonction de la largeur du bloc conteneur (élément parent).

  • inherit spécifie que la valeur de l'attribut width doit être héritée de l'élément parent.

Exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
img.normal
{
	height:auto;
}
img.big
{
	height:120px;
}
p.ex
{
	height:100px;
	width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>
Copier après la connexion

Partage de vidéos associé : tutoriel vidéo CSS

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