Modèles de boîtes, flux de documents, positionnement, mise en page et conception réactive

title: “Modèle de boîte、Flux de documents、Positionnement、Mise en page et conception réactive”

Modèle de boîte

Quand on définit la largeur et la hauteur de la boîte,Le réglage est content Hauteur et largeur,padding Et border Non calculé. Peut passer box-sizing Définir la taille du modèle de boîte,Valeur par défaut content-box,C'est - à - dire calculer la zone de contenu calculer la taille de la boîte.Dans les projets réels,Il va suivre border-box Calculer la taille de la boîte,La boîte sera bordée(margin)Set to 0.

Flux de documents

Comment les boîtes sont disposées dans le document,C'est - à - dire l'élément bloc intérieur et l'élément bloc.

Positionnement

Positionnement des coordonnées

• static：La position ne change pas.
• relative：Coordonnées de localisation de l'élément par rapport au flux de documents dans lequel il se trouve,L'emplacement original de l'élément dans le flux de documents est conservé,N'affecte pas la position des autres éléments.
• absolute：Hors flux de documents,Et cherche le premier non static L'élément parent de a comme référence de coordonnées relatives.
• fixed：Hors flux de documents,Localiser la fenêtre.

Positionnement flottant

Mise en page

Flex Mise en page

Flex Conteneur

• Direction de l'alignement(flex-direction)
  

Attention!： La page de position de début et de fin est inversée au moment de l'inversion

• Traitement des débordements（flex-wrap）：no-wrap、wrap、wrap-reverse
  

• Alignement（align-items(Longitudinal) Et justify-content（Horizontal））：flex-start、center、space-between、space-around、flex-end
  
  

Attention!：Après inversion,Changement de direction longitudinale,Changement latéral longitudinal.

FlexÉlément

• flex-grow、flex-shrink、flex-basis
  
  
  
  
  

Grid Mise en page

Zone nommée

Zone flottante

Réactif web Conception

Réponse de la fenêtre ： Assurez - vous que la page Web occupe l'écran à sa taille originale dans différentes fenêtres , Pas de zoom de pixels .

Réponse de style

Réponse Pixel

Réponse de l'image