


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 PMUne 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 valeursgauche 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.

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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

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

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

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
