Quels styles sont couramment utilisés avec le positionnement CSS ?

青灯夜游
Libérer: 2023-01-07 11:44:41
original
1823 Les gens l'ont consulté

Habituellement utilisé avec les styles haut, bas, gauche et droite. L'attribut top spécifie le bord supérieur de l'élément et définit le décalage entre la limite supérieure de la marge de l'élément positionné et la limite supérieure de son bloc contenant ; l'attribut bottom spécifie le bord inférieur de l'élément ; l'attribut left spécifie le bord gauche ; de l'élément ; et l'attribut right spécifie le bord droit de l'élément.

Quels styles sont couramment utilisés avec le positionnement CSS ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Le positionnement CSS est généralement utilisé avec les styles haut, bas, gauche et droite. L'attribut

  • top spécifie le bord supérieur de l'élément. Cette propriété définit le décalage entre la limite de marge supérieure d'un élément positionné et la limite supérieure de son bloc conteneur. L'attribut

  • bottom spécifie le bord inférieur de l'élément. Cette propriété définit le décalage entre la limite inférieure de la marge de l'élément positionné et la limite inférieure de son bloc conteneur. L'attribut

  • left spécifie le bord gauche de l'élément. Cette propriété définit le décalage entre le bord de la marge gauche de l'élément positionné et le bord gauche de son bloc conteneur. L'attribut

  • right spécifie le bord droit de l'élément. Cette propriété définit le décalage entre le bord de la marge droite de l'élément positionné et le bord droit de son bloc conteneur.

Remarque : Si la valeur de l'attribut "position" est "statique", alors la définition des attributs "top", "bottom", "left" et "right" n'aura aucun effet.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>
Copier après la connexion

Rendu :

Quels styles sont couramment utilisés avec le positionnement CSS ?

(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!

É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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!