Quelles sont les méthodes de mise en page CSS ? Résumé des méthodes de mise en page CSS-tutoriel CSS-php.cn

Quelles sont les méthodes de mise en page CSS ? Résumé des méthodes de mise en page CSS

不言

Libérer： 2018-08-02 16:22:22

original

2648 Les gens l'ont consulté

La mise en page CSS est très utile dans les pages Web. La mise en page CSS peut contrôler la position des pages Web par rapport au flux de mise en page normal, aux éléments environnants, aux conteneurs parents ou aux fenêtres/fenêtres principales. Alors, quelles sont les méthodes de mise en page CSS ? Examinons de plus près la méthode de mise en page CSS.

Css pour implémenter la disposition gauche et droite

Il existe environ six façons d'implémenter la disposition gauche et droite avec CSS :

1. L'implémentation li de la balise table

table a des attributs qui peuvent réaliser une disposition à gauche et à droite. tr représente une ligne et td peut être ajouté à tr pour réaliser. la disposition gauche et droite de la boîte.

2. inline-block

l'attribut display:inline-block est un attribut entre les éléments au niveau de la ligne (display:inline ) et les éléments au niveau du bloc (display:block). Cela peut être comme si les éléments au niveau de la ligne pouvaient être disposés horizontalement, et les attributs de largeur et de hauteur peuvent être définis comme des éléments au niveau du bloc, afin qu'ils puissent être disposés à gauche et à droite.

3. Float implémente la disposition gauche et droite

float float, qui sépare la zone de bloc du flux de documents de la balise parent. se déplacer vers la balise parent. La limite gauche de la zone est placée. La valeur de l'attribut droit fait que le bloc de zone est placé à la limite droite de l'étiquette parent. Dans ce cas, cet attribut peut être utilisé pour obtenir une disposition gauche et droite. .

La disposition float adopte une disposition échelonnée pour la disposition des nœuds suivants, et le bloc en ligne adopte une disposition normale.

4. L'attribut flexbox implémente la disposition gauche et droite

disposition de boîte flexible flexbox, display:box Cette disposition est principalement utilisée pour le développement front-end mobile.

5. Float+margin implémente la disposition à gauche et à droite

float peut créer une disposition des éléments à gauche ou à droite si une zone de flux normal est définie au même niveau. élément juxtaposé au bloc flottant, le bloc flottant sera à la limite de la zone frère à flux normal, mais le bloc flottant affectera la disposition du bloc de zone, donc l'influence du bloc flottant doit être effacée, donc à ce moment , la case en dehors du bloc de zone d'écoulement normal. Le réglage d'une marge égale à la largeur du flotteur peut effacer l'effet.

6. position : disposition absolue à gauche et à droite

Le positionnement absolu crée un phénomène de mise en page qui est hors du flux de documents. Absolute peut couvrir des éléments à n'importe quelle position et n'affectera pas la disposition du flux normal, mais cela provoquera une ombre.

Mise en page CSS gauche, milieu et droite

Mise en page adaptative à trois colonnes : largeur fixe des deux côtés et largeur adaptative du bloc du milieu .

1. Méthode de positionnement absolu

Utilisez le positionnement absolu sur les côtés gauche et droit. Étant donné que le positionnement absolu est hors du flux de documents, le centre suivant coulera naturellement vers. dessus, puis utilisez l'attribut margin , en laissant la largeur des éléments gauche et droit afin que l'élément du milieu puisse s'adapter à la largeur de l'écran.

2. Utilisez la méthode auto-flottante

Utilisez float:left et float:right pour left et right respectivement pour faire sortir les éléments gauche et droit. flux de documents, et l'élément du milieu est normal. Dans un flux de documents normal, utilisez margin pour spécifier les marges gauche et droite pour le positionner. En même temps, la boîte parent définit overflow: auto; pour empêcher la boîte enfant de déborder

3. Disposition du Saint Graal

Le principe de la disposition du Saint Graal est le suivant. la méthode de la marge négative. Pour utiliser la mise en page Holy Graal, vous devez d'abord inclure un p en dehors de l'élément central. Pour inclure p, vous devez définir l'attribut float pour former un BFC et définir la largeur, et cette largeur doit correspondre à la valeur négative de la marge de. le bloc de gauche.

Mise en page centrée CSS

Centrage horizontal

Pour les éléments en ligne (inline) : texte- align: center;

Pour les éléments de niveau bloc (block) : définissez la largeur et margin-left et margin-right sur auto, utilisez max-width au lieu de width.

Pour plusieurs éléments de niveau bloc : définissez text-align: center; pour l'élément parent et définissez display: inline-block; (vertical-alinga:top) pour l'élément enfant ; 🎜>

mise en page flexible : display:flex; justifier-content:center

Centre vertical

Pour les éléments en ligne (en ligne)

Single line : définissez un remplissage égal en haut et en bas (ou définissez la hauteur de ligne et la hauteur pour qu'elles soient égales)

Plusieurs lignes : définissez le remplissage supérieur et inférieur pour qu'ils soient égaux ou définissez l'affichage : cellule de tableau et vertical ; align: middle;; ou utilisez une disposition flexible; ou utilisez un pseudo-élément

Pour les éléments de niveau bloc (bloc) : (Pour les deux premières solutions ci-dessous, l'élément parent doit utiliser une disposition relative)

Hauteur connue : les éléments enfants utilisent une disposition absolue en haut : 50 % ;, Ensuite, utilisez une marge supérieure négative pour tirer l'élément enfant vers le haut de la moitié de la hauteur

Hauteur inconnue : l'élément enfant utilise une position de disposition absolue : absolue ; top : 50 % ; transform : translateY(-50 %);

Utilisez Flexbox : sélectionnez la direction, justification-content : center;

css pour obtenir un centrage horizontal et vertical layout

Hauteur et largeur fixes : utilisez d'abord la disposition absolue top : 50 % ; left : 50 % ;, puis utilisez une marge négative égale à la moitié de la largeur et de la hauteur pour retirer les éléments enfants

La hauteur et la largeur sont inconnues : utilisez d'abord la disposition absolue en haut : 50 % ; à gauche : 50 % ;, puis définissez la transformation : translate(-50%, -50%);

Utilisez Flexbox : justifier-contenu : centre ; aligner les éléments : centre.

box-sizing

Lorsque vous définissez un élément sur box-sizing: border-box;, le remplissage et la bordure de cet élément n'augmenteront plus sa largeur.

Pourcentage de largeur

Le pourcentage est une unité de mesure relative au bloc contenant. C'est utile pour les images et les modules boîte : par exemple, la largeur de l'image est toujours 50% de la largeur du conteneur, même si la fenêtre est réduite.

css implémente la disposition des blocs en ligne

l'élément inline-block affecte le centrage vertical, ajoutez vertical-align: top.