Maison > Article > interface Web > Comment définir la hauteur et la largeur en CSS
Comment définir la hauteur et la largeur en CSS
- 青灯夜游original
- 2021-04-21 16:35:5010628parcourir
Comment définir la hauteur et la largeur en CSS : 1. Utilisez les attributs width et height pour définir la largeur et la hauteur de l'élément 2. Utilisez les attributs max-width et max-height pour définir la largeur maximale ; et la hauteur de l'élément 3. Utilisez min Les attributs -width et min-height définissent la largeur et la hauteur minimales de l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Méthode 1 : Utiliser les attributs width et height
Les attributs width et height peuvent définir la largeur et la hauteur de l'élément. Ils définissent la largeur et la hauteur de l'élément. zone de contenu de l'élément. Incluez le remplissage, les bordures ou les marges.
Valeur de l'attribut :
| 值 | 描述 |
|---|---|
| auto | 默认值。浏览器可计算出实际的宽度或高度。 |
| length | 使用 px、cm 等单位定义宽度或高度。 |
| % | 基于包含它的块级对象（父元素）的百分比宽度或高度。 |
Méthode 2 : Utiliser les attributs max-width et max-height
attributs max-width et max-height Définissez la largeur et la hauteur maximales d'un élément, sans compter le remplissage, les bordures ou les marges !
Valeur d'attribut :
| 值 | 描述 |
|---|---|
| none | 默认。定义对元素的最大宽度或高度没有限制。 |
| length | 定义元素的最大宽度值或最大高度值。 |
| % | 定义基于包含它的块级对象的百分比最大宽度或最大高度。 |
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
max-width:100px;
max-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>这一段的最大宽度设置为100 px，最大高度设置为100 px。</p>
</body>
</html>
Méthode 3 : Utiliser min-width et min-height Propriétés
Les propriétés min-width et min-height définissent la largeur et la hauteur minimales d'un élément, sans compter le remplissage, les bordures ou les marges !
Valeur de l'attribut :
| 值 | 描述 |
|---|---|
| length | 定义元素的最小宽度或最小高度。默认值是 0。 |
| % | 定义基于包含它的块级对象的百分比最小宽度或最小高度。 |
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
min-width:150px;
min-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>这个段落的最小宽度设置为 150px，最小高度设置为 100px。</p>
</body>
</html>
(Partage vidéo d'apprentissage : 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!