Explication détaillée des propriétés CSS width et height-tutoriel CSS-php.cn

Explication détaillée des propriétés CSS width et height

WBOY

Libérer： 2022-08-02 17:44:55

original

3902 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur css, 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. .

Explication détaillée des propriétés CSS width et height

(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és hauteur et largeur peuvent être définies sur les valeurs suivantes : height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit

auto - par défaut. Le navigateur calcule la hauteur et la largeur.

length - Définissez la hauteur/largeur en px, cm, etc.

% - Définissez la hauteur/largeur en pourcentage du bloc conteneur.

Explication détaillée des propriétés CSS width et height

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

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

L'exemple est le suivant :

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的高度和宽度</h1>
<p>这个 div 元素的高度为 200 像素，宽度为 50%：</p>
<div></div>
</body>
</html>

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 Explication détaillée des propriétés CSS width et height

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. Explication détaillée des propriétés CSS width et height

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 : 🎜

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的最大宽度</h1>
<p>这个 div 元素的高度为 100 像素，最大宽度为 500 像素：</p>
<div></div>
<p>请调整浏览器窗口来查看效果。</p>
</body>
</html>

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!