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
- WBOYoriginal
- 2016-05-16 16:40:292067parcourir
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 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.
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 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.
Déclaration：
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