Maison > interface Web > tutoriel CSS > Trois mécanismes de positionnement en CSS

Trois mécanismes de positionnement en CSS

高洛峰
Libérer: 2017-02-27 09:11:11
original
1674 Les gens l'ont consulté

Trois mécanismes de positionnement de base en CSS

a. Flux de documents ordinaire

b Positionnement : positionnement relatif

Positionnement absolu

Fixe. positionnement

c. Flottant

1. Dans le flux ordinaire, la position des éléments est déterminée par l'ordre du document et la nature des éléments au niveau du bloc sont disposés dans l'ordre de. de haut en bas et la distance verticale entre les cases Calculé à partir de la valeur de marge verticale de la boîte, les éléments en ligne sont disposés horizontalement dans une rangée

2. Le positionnement relatif est considéré comme faisant partie du flux normal de l'élément déplacé. occupe toujours la position d'origine. Déplacer l'élément le fera recouvrir les autres La boîte

3. Le positionnement absolu est relatif à l'élément ancêtre le plus proche positionné, et le positionnement absolu sort du flux ordinaire

4. Le positionnement fixe est relatif au positionnement de la fenêtre du navigateur

5 L'élément flottant peut se déplacer vers la gauche et la droite jusqu'à ce que le bord de sa bordure extérieure touche le bord de la boîte le contenant ou une autre boîte flottante <.>

6. L'élément flottant s'éloigne du flux normal du document

7. Les éléments en ligne et les éléments de bloc en ligne seront disposés autour de la boîte flottante et les éléments de bloc seront couverts

Pour plus d'articles liés aux trois mécanismes de positionnement en CSS, faites attention au site PHP 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