Introduction à la mise en page de base et à la position du format en CSS

Cinq types de positionnement de mise en page de base : * Mise en page flexible - la largeur totale et les valeurs de toutes les colonnes qu'elle contient sont écrites en unités em. Cela devrait permettre à la mise en page d'être mise à l'échelle en utilisant la taille de police de base spécifiée par le navigateur. Cela peut être plus attrayant et accessible pour les utilisateurs malvoyants, car les largeurs de colonnes seront plus larges, permettant des longueurs de ligne plus confortables et plus lisibles, quelle que soit la taille. Étant donné que la largeur totale sera mise à l'échelle, votre conception doit tenir compte de cette largeur. * Mise en page fixe - La largeur globale et les valeurs de toutes les colonnes qu'elle contient sont écrites en pixels. La mise en page est centrée dans le navigateur de l'utilisateur. * Disposition fluide - la largeur globale et les valeurs de toutes les colonnes qu'elle contient sont écrites en pourcentages. Le pourcentage est calculé à partir de la taille de la fenêtre du navigateur de l'utilisateur. * Mise en page hybride - La mise en page hybride combine deux autres types de mises en page - élastique et fluide. La largeur totale de la page est de 100 %, mais les valeurs de la barre latérale sont définies en unités em. * Disposition absolument positionnée - Toutes les colonnes extérieures des mises en page susmentionnées utilisent du contenu flottant. Et une mise en page en position absolue fait exactement ce que son nom l'indique : avec une colonne extérieure en position absolue. Il ne faut pas oublier que lors de l'utilisation de ces mises en page, la barre latérale "augmente le flux du document" et peut donc avoir des résultats inappropriés (par exemple, le pied de page peut être "invisible" à l'endroit où se termine la barre latérale et être contenu dans la zone de contenu principale. page avec moins de contenu que la barre latérale chevauche le pied de page).

La première relation de position : position:fixed verrouille la position (par rapport à la position de l'ensemble du navigateur), couramment utilisée dans les petites publicités dans le coin inférieur droit des principaux sites Web ou d'autres emplacements.

Si vous devez ajuster la position de verrouillage, vous devez utiliser la méthode suivante :

La deuxième relation de position : position : position absolue absolue (par rapport à l'élément parent - le navigateur, le supérieur du positionnement absolu)

(1) S'il n'y a pas d'absolu au bord le plus extérieur, le div changera de position relative au navigateur lors de l'ajustement ; (2) Le plus extérieur Avec absolu, le div change par rapport à la bordure la plus extérieure lorsqu'il est ajusté.

Si vous devez ajuster la position absolue, vous devez utiliser la méthode suivante :

La relation de troisième position : position:relative Position relative (par rapport à la position où elle doit apparaître)

Si vous devez ajuster la position relative, vous devez utiliser la méthode suivante :