syntaxe de l'attribut inférieur en CSS

Syntaxe de l'attribut bottom et exemples de code en CSS

En CSS, l'attribut bottom est utilisé pour spécifier la distance entre un élément et le bas du conteneur. Il contrôle la position d'un élément par rapport au bas de son élément parent. La syntaxe de l'attribut

bottom est la suivante :

element {
    bottom: value;
}

où element représente l'élément auquel le style doit être appliqué et value représente la valeur inférieure à définir.

value peut être une valeur de longueur spécifique, telle que des pixels (px) ou un pourcentage (%). Il peut également s'agir d'un nombre spécifique, tel qu'une valeur négative ou zéro. De plus, l'attribut bottom peut également utiliser certaines valeurs de mots-clés CSS, telles que auto, initial et Ensure.

Ensuite, examinons quelques exemples de code spécifiques.

Exemple 1 :
Supposons que nous ayons un élément parent d'une hauteur de 300 px et un élément enfant d'une hauteur de 100 px. Nous voulons que l'élément enfant soit positionné à 20 pixels du bas de l'élément parent.

Code HTML :

<div class="parent">
    <div class="child"></div>
</div>

Code CSS :

.parent {
    height: 300px;
    position: relative;
}

.child {
    height: 100px;
    position: absolute;
    bottom: 20px;
}

Dans le code ci-dessus, nous définissons un positionnement relatif à l'élément parent afin que les éléments enfants puissent être positionnés en fonction de celui-ci. Ensuite, nous définissons une position absolue pour l'élément enfant et définissons l'attribut bottom sur 20px. De cette façon, l'élément enfant sera positionné à 20 pixels du bas de l'élément parent.

Exemple 2 :
Nous pouvons également définir la valeur de l'attribut bottom sur un pourcentage.

Code HTML :

<div class="parent">
    <div class="child"></div>
</div>

Code CSS :

.parent {
    height: 300px;
    position: relative;
}

.child {
    height: 100px;
    position: absolute;
    bottom: 50%;
}

Dans cet exemple, nous définissons l'attribut bottom de l'élément enfant à 50 %. Cela signifie que l'élément enfant sera centré en bas de l'élément parent.

Exemple 3 :
Si nous définissons la valeur de l'attribut bottom sur auto, les éléments enfants seront disposés selon le flux normal du document.

Code HTML :

<div class="parent">
    <div class="child"></div>
</div>

Code CSS :

.parent {
    height: 300px;
}

.child {
    height: 100px;
    margin-top: 200px; /* 将子元素移至父元素底部 */
    position: relative;
    bottom: auto;
}

Dans cet exemple, nous utilisons l'attribut margin-top pour déplacer l'élément enfant vers le bas de l'élément parent. Ensuite, en définissant l'attribut bottom sur auto, les éléments enfants seront disposés selon le flux normal du document.

Résumé :
La propriété bottom en CSS est utilisée pour spécifier la distance entre un élément et le bas du conteneur. Il peut être défini par pixels, pourcentage, valeur numérique ou mot-clé. En appliquant correctement l'attribut bottom, nous pouvons facilement contrôler la position des éléments sur la page. J'espère que cet article vous aidera à comprendre et à utiliser l'attribut bottom en 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!