Maison > Article > interface Web > Explication détaillée des propriétés CSS width et height
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. .
(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)
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.
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
<!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>
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
Lorsque la fenêtre du navigateur est plus petite que la largeur de l'élément (500 px), le problème
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>🎜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!