Maison interface Web tutoriel HTML Trois façons de mise en page HTML CSS (mise en page naturelle/mise en page fluide/mise en page positionnée)_HTML/Xhtml_Production de pages Web

Trois façons de mise en page HTML CSS (mise en page naturelle/mise en page fluide/mise en page positionnée)_HTML/Xhtml_Production de pages Web

May 16, 2016 pm 04:40 PM
mise en page CSS css教程

1. Mise en page naturelle
Une mise en page sans aucune modification est automatiquement déplacée vers la gauche.
2. Disposition fluide
La situation float:left mentionnée ci-dessus.
3. Disposition du positionnement
Le positionnement relatif et le positionnement absolu sont relatifs à la balise div parent.
Relatif------prendre la position d'origine de cet élément comme point de référence.
Absolu--prendre l'origine (coin supérieur gauche) de la balise div parent comme point de référence.

Puisque le calque externe est position:relative, si le calque interne est absolu, le coin supérieur gauche du calque externe sera aligné comme référence de déplacement. Bien sûr, seule position:relative est écrite dans la couche externe, et les deux valeurs​​gauche et haut sont écrites, ce qui signifie que la position d'origine de cet élément est utilisée comme origine de référence de mise en page pour l'alignement à gauche et en haut. .

Une autre situation est qu'il y a juste une position : absolue ; il n'y a pas de position : relative dans la couche externe. Dans ce cas, quel point sera trouvé comme référence ? Le principe à ce moment est le suivant : s'il y a un relatif dans un élément parent, l'élément parent sera utilisé comme origine de référence. S'il n'y a pas de position:relative, le corps sera utilisé comme origine de référence. S'il n'y a pas de relatif dans la couche externe de position:absolute, il n'y a aucune différence entre les deux mises en page.

Bien sûr, la dernière situation est : la couche externe est : position : absolue ; la couche interne est position : relative, que va-t-il se passer ? Selon le principe original, absolu fera référence au corps comme origine de la mise en page, et relatif fera référence à sa position d'origine comme origine de la mise en page. À ce stade, il fait en fait référence au coin supérieur gauche de la couche externe comme origine de la mise en page. .
D'autres dépendront de la situation réelle.
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

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Questions fréquemment posées par les enquêteurs front-end Questions fréquemment posées par les enquêteurs front-end Mar 19, 2024 pm 02:24 PM

Questions fréquemment posées par les enquêteurs front-end

Méthodes et techniques sur la façon d'implémenter la disposition du flux en cascade via du CSS pur Méthodes et techniques sur la façon d'implémenter la disposition du flux en cascade via du CSS pur Oct 20, 2023 pm 06:01 PM

Méthodes et techniques sur la façon d'implémenter la disposition du flux en cascade via du CSS pur

Conseils de mise en page CSS : meilleures pratiques pour la mise en œuvre de la disposition des icônes de grille circulaire Conseils de mise en page CSS : meilleures pratiques pour la mise en œuvre de la disposition des icônes de grille circulaire Oct 20, 2023 am 10:46 AM

Conseils de mise en page CSS : meilleures pratiques pour la mise en œuvre de la disposition des icônes de grille circulaire

L'évolution et l'application des unités de mise en page CSS : des pixels aux unités relatives basées sur la taille de police de l'élément racine L'évolution et l'application des unités de mise en page CSS : des pixels aux unités relatives basées sur la taille de police de l'élément racine Jan 05, 2024 pm 05:41 PM

L'évolution et l'application des unités de mise en page CSS : des pixels aux unités relatives basées sur la taille de police de l'élément racine

Tutoriel de mise en page CSS : la meilleure façon d'implémenter la mise en page du Saint Graal Tutoriel de mise en page CSS : la meilleure façon d'implémenter la mise en page du Saint Graal Oct 19, 2023 am 10:19 AM

Tutoriel de mise en page CSS : la meilleure façon d'implémenter la mise en page du Saint Graal

Méthode de mise en page CSS Positions pour implémenter une mise en page d'image réactive Méthode de mise en page CSS Positions pour implémenter une mise en page d'image réactive Sep 26, 2023 pm 01:37 PM

Méthode de mise en page CSS Positions pour implémenter une mise en page d'image réactive

SEO front-end : explication détaillée SEO front-end : explication détaillée Mar 12, 2024 pm 06:13 PM

SEO front-end : explication détaillée

Tutoriel de mise en page CSS : La meilleure façon d'implémenter une mise en page réactive à deux colonnes Tutoriel de mise en page CSS : La meilleure façon d'implémenter une mise en page réactive à deux colonnes Oct 18, 2023 am 11:04 AM

Tutoriel de mise en page CSS : La meilleure façon d'implémenter une mise en page réactive à deux colonnes

See all articles