Introduction à la mise en page de base et à la position du format en CSS-tutoriel HTML-php.cn

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

零下一度

Libérer： 2017-07-26 09:34:00

original

1515 Les gens l'ont consulté

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 :

position:fixed; haut:0px gauche:0px; droite:0px;" >

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 :

position:absolute; haut:0px gauche:0px; droite:0px;" >

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 :

position:relative; haut:0px gauche:0px droite:0px; ">

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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