Décalage HTML. CSS - positionnement des blocs. Positionnement absolu et relatif. Effacement et contenu flottant
Lorsqu'il travaille avec du texte, l'utilisateur peut avoir besoin d'échanger des phrases ou des paragraphes entiers ou d'organiser des fragments de manière non standard. Déplacer un bloc de texte vers Application Microsoft Office Word peut être utilisé de plusieurs manières.
Instructions
Ctrl, Shift et la flèche droite/gauche mettent en surbrillance un mot, et si vous utilisez les flèches haut ou bas, vous pouvez sélectionner un paragraphe entier.
L'un des meilleurs côtés Ce que fait CSS, c'est que les styles nous donnent la possibilité de positionner le contenu et les éléments sur une page de presque toutes les manières imaginables. Cela ajoute de la structure à notre conception et contribue à rendre le contenu plus visuel.
Il y en a plusieurs différents types positionnement en CSS, chacun de ces types a sa propre portée. Dans ce chapitre, nous allons examiner plusieurs divers cas applications - création de mises en page réutilisables et positionnement unique d'éléments jetables, ainsi qu'une description de plusieurs méthodes pour y parvenir.
Positionnement via flotteur
Une façon de positionner des éléments sur une page consiste à utiliser la propriété float. Cette propriété est assez polyvalente et peut être utilisée de différentes manières.
Essentiellement, la propriété float prend un élément, le supprime du flux normal de la page et le positionne à gauche ou à droite de son élément parent. Tous les autres éléments de la page s'enrouleront autour d'un tel élément. Par exemple, les paragraphes s'enrouleront autour d'une image si l'élément La propriété float est définie.
Lorsque la propriété float est appliquée à plusieurs éléments à la fois, elle permet de créer une mise en page avec des éléments flottants côte à côte ou en face les uns des autres, comme indiqué dans une mise en page multi-colonnes.
La propriété float prend plusieurs valeurs, les deux plus populaires étant left et right, qui permettent à l'élément de flotter à gauche ou à droite de son parent.
Img (flottant : gauche ; )
flotter en pratique
Créons une mise en page générale avec un en-tête en haut, deux colonnes au centre et un pied de page en bas. Idéalement, cette page devrait être balisée avec des éléments
Démonstration d'une mise en page sans float
Voici les éléments
Section ( float: gauche; ) de côté ( float: right; )
Pour référence, les éléments flottants sont positionnés le long du bord de l'élément parent. S'il n'y a pas de parent, l'élément flottant sera positionné en bord de page.
Lorsque nous définissons un élément comme flottant, nous le supprimons du flux normal du document HTML. Cela fait que la largeur par défaut de cet élément devient la largeur de son contenu. Parfois, par exemple lorsque nous créons des colonnes pour une mise en page réutilisable, ce comportement n'est pas souhaitable. Cela peut être corrigé en ajoutant une propriété width avec une valeur fixe pour chaque colonne. De plus, pour empêcher les éléments flottants de se toucher, provoquant ainsi le placement du contenu d'un élément à côté d'un autre, nous pouvons utiliser la propriété margin pour définir l'espace entre les éléments.
Ci-dessous, nous étendons le bloc de code précédent en ajoutant une marge et une largeur pour chaque colonne afin de mieux façonner le résultat souhaité.
Section ( float : gauche ; marge : 0 1,5 % ; largeur : 63 % ; ) côté ( float : droite ; marge : 0 1,5 % ; largeur : 30 % ; )
Démo de mise en page avec float
float peut changer la valeur d'affichage de l'élément
Pour un élément flottant, il est également important de comprendre que l'élément est supprimé du flux normal de la page et que la valeur d'affichage par défaut de l'élément peut changer. La propriété float repose sur la valeur d'affichage de l'élément définie sur block et peut modifier la valeur d'affichage par défaut de l'élément s'il n'est pas déjà rendu en tant qu'élément de bloc.
Par exemple, un élément dont l'affichage est spécifié comme inline , tel que inline , ignore les propriétés de hauteur ou de largeur. Cependant, si vous spécifiez un float pour un élément en ligne, la valeur d'affichage deviendra block et l'élément pourra alors déjà prendre les propriétés height ou width.
Lorsque nous faisons flotter un élément, nous devons faire attention à la manière dont cela affecte la valeur de la propriété display.
Pour deux colonnes, vous pouvez définir float, une colonne à gauche et l'autre à droite, mais pour plusieurs colonnes, nous devrons changer notre approche. Disons, par exemple, que nous aimerions avoir une ligne de trois colonnes entre nos éléments
Pour agencer ces trois éléments
Section ( float : gauche ; marge : 0 1,5 % ; largeur : 30 % ; )
Ici, nous avons trois colonnes, toutes avec la même largeur et la même valeur de marge, et float défini sur left .
Démonstration d'une disposition à trois colonnes avec float
Effacement et contenu flottant
La propriété float a été initialement conçue pour permettre au contenu de circuler autour des images. Une image peut recevoir un flottant et tout le contenu autour de cette image circule naturellement autour d'elle. Bien que cela fonctionne très bien pour les images, la propriété float n'est pas vraiment destinée à être utilisée à des fins de mise en page et de positionnement et comporte donc quelques pièges.
L'un de ces pièges est que parfois les styles appropriés n'apparaissent pas sur un élément adjacent ou parent d'un élément flottant. Lorsqu'un élément est défini sur flottant, il est supprimé du flux normal de la page et, par conséquent, les styles d'élément autour de cet élément flottant peuvent être affectés négativement.
Souvent, les valeurs des propriétés margin et padding sont mal interprétées, ce qui les amène à se fondre dans l'élément flottant. D'autres propriétés peuvent également être affectées.
Un autre bug est que parfois du contenu indésirable commence à s'enrouler autour de l'élément float. La suppression d'un élément du flux du document permet à tous les éléments autour de l'élément flottant de le contourner et d'occuper tout l'espace disponible autour de l'élément flottant, ce qui est souvent indésirable.
Dans notre exemple précédent à deux colonnes, après avoir ajouté un flottant aux éléments
Démonstration de tracé sans effacement des flotteurs
Pour empêcher le contenu de s'enrouler autour des éléments flottants, nous devons effacer le flottant et ramener la page à son flux normal. Nous verrons comment effacer les flotteurs, puis examinerons leur contenu.
Flotteurs de dégagement
La suppression d'un flottant s'effectue à l'aide de la propriété clear, qui prend plusieurs valeurs différentes : les valeurs les plus couramment utilisées sont left , right et les deux .
Div ( clair : gauche ; )
La valeur left efface les flotteurs de gauche, tandis que la valeur right efface les flotteurs de droite. Cependant, la valeur à la fois effacera les flotteurs gauche et droit et constitue souvent l'option la plus idéale.
Revenant à notre exemple précédent, si nous utilisons la propriété clear avec une valeur des deux sur un élément
Pied de page ( clair : les deux ; )
Démonstration d'implantation avec effacement des flotteurs
Contenu flottant
Au lieu d'effacer float , une autre option consiste à définir le contenu sur float . Le résultat sera à peu près le même, mais le contenu flottant garantit vraiment que tous nos styles s'afficheront correctement.
Pour définir le contenu flottant, les éléments flottants doivent être à l'intérieur de l'élément parent, il agira comme un conteneur, laissant le flux du document complètement normal à l'extérieur de celui-ci. Le style de cet élément parent est représenté par une classe de groupe, comme indiqué ici :
Group::before, .group::after ( contenu: ""; affichage: tableau; ) .group::after ( effacer: les deux; ) .group ( effacer: les deux; *zoom: 1; )
Il ne se passe pas grand-chose ici, mais essentiellement tout ce que fait le CSS est d'effacer tous les éléments flottants à l'intérieur de l'élément group et de ramener le document au flux normal.
Plus précisément, les pseudo-éléments ::before et ::after, comme expliqué dans la leçon 4, génèrent dynamiquement des éléments au-dessus et au-dessous d'un élément avec la classe group . Ces éléments n'incluent aucun contenu et sont rendus sous forme d'éléments de tableau, similaires aux éléments de bloc. Un élément généré dynamiquement après un élément de groupe efface le flotteur à l'intérieur de l'élément de groupe, tout comme clear le faisait auparavant. Enfin, l'élément group efface également tous les flottants qui peuvent apparaître devant lui au cas où il y aurait un flottant avec la valeur left ou right . Une petite astuce est également incluse qui permet aux anciens navigateurs de fonctionner correctement.
Il y a plus de code ici que la simple commande clear: two, mais cela peut être très utile.
Compte tenu de notre mise en page à deux colonnes, nous pourrions résumer
Group::before, .group::after ( contenu: ""; affichage: table; ) .group::after ( effacer: les deux; ) .group ( effacer: les deux; *zoom: 1; ) section ( float: gauche ; marge : 0 1,5 % ; largeur : 63 % ; ) de côté ( float : droite ; marge : 0 1,5 % ; largeur : 30 % ; )
Démonstration d'une mise en page avec du contenu flottant
La technique présentée ici est connue sous le nom de "clearfix" et est souvent vue sur d'autres sites avec le nom de classe clearfix ou cf. Nous avons choisi d'utiliser le nom de classe group car il représente un groupe d'éléments et exprime mieux le contenu.
Lorsque des éléments flottent, il est important de surveiller la manière dont ils affectent le flux des pages et de garantir que le flux des pages est réinitialisé en effaçant ou via le contenu flottant comme prévu. Sinon, garder une trace des flottants peut causer beaucoup de problèmes, en particulier sur les pages contenant plusieurs lignes, chacune avec plusieurs colonnes.
En pratique
Revenons au site Styles Conference et essayons d'ajouter des flotteurs à certains contenus.
- Tout d'abord, avant d'appliquer float à un élément, fournissons du contenu à ces éléments flottants en ajoutant clearfix à notre CSS. Dans le fichier main.css, juste en dessous de nos styles de grille, nous ajouterons clearfix sous le nom de la classe de groupe, comme avant.
/* ================================================= ====== Clearfix ======= ==================================== * / .group::before, .group::after ( contenu : " " ; affichage : tableau ; ) .group::after ( effacer : les deux ; ) .group ( effacer : les deux ; *zoom : 1 ; )
Maintenant que nous pouvons utiliser float, définissons-le pour le principal élément intérieurà gauche et laissez le reste du contenu de l'en-tête s'écouler vers la droite.
Pour ce faire, ajoutez la classe logo à l'élément . Ensuite, dans notre CSS, nous ajouterons une nouvelle section de style pour l'en-tête principal. Dans cette section, nous sélectionnerons l'élément
avec la classe logo et réglez le float à left .
Conférence sur les styles/* ======================================= En-tête principal ====== = =================================== */ .logo ( float: gauche; )
Pendant que nous y sommes, ajoutons un peu plus de détails à notre logo. Commençons par placer l'élément
ou un saut de ligne entre les mots « Styles » et « Conférence » pour forcer le texte de notre logo à apparaître sur deux lignes.
En CSS, nous ajouterons une bordure en haut de notre logo et un remplissage vertical afin que le logo puisse « respirer » librement.
Styles
Conférence
Logo ( bordure supérieure : 4 px solide #648880 ; remplissage : 40px 0 22px 0 ; float : gauche ; )
Depuis que nous avons créé l'élément floated, nous voulons définir le contenu sur float . Parent immédiat pour est un élément
...
nous y ajouterons donc un cours collectif. Cela lui appliquera les styles clearfix que nous avons définis précédemment. Élément
Contrairement à l'élément cependant, nous n'allons pas appliquer la classe directement à l'élément flottant. Cette fois, nous allons ajouter une classe au parent de l'élément float et utiliser un sélecteur CSS unique pour sélectionner l'élément, puis lui attribuer un float .
Commençons par ajouter la classe Primary-footer à l'élément
Maintenant que la classe de pied de page principal est définie sur l'élément
/* ======================================== Sous-sol principal ====== ==================================== */ .primary-footer small ( float: left; ) Pour vérifier - ici nous sélectionnons l'élément , qui doit être à l'intérieur d'un élément avec la valeur Primary-footer attribut de classe, comme notre élément
Enfin, nous ajouterons un peu de remplissage en haut et en bas de l'élément.
Pied de page principal ( padding-bottom: 44px; padding-top: 44px; )
à gauche et laissez le reste du contenu de l'en-tête s'écouler vers la droite.
Pour ce faire, ajoutez la classe logo à l'élément . Ensuite, dans notre CSS, nous ajouterons une nouvelle section de style pour l'en-tête principal. Dans cette section, nous sélectionnerons l'élément
avec la classe logo et réglez le float à left .
Conférence sur les styles/* ======================================= En-tête principal ====== = =================================== */ .logo ( float: gauche; )
Pendant que nous y sommes, ajoutons un peu plus de détails à notre logo. Commençons par placer l'élément
ou un saut de ligne entre les mots « Styles » et « Conférence » pour forcer le texte de notre logo à apparaître sur deux lignes.
En CSS, nous ajouterons une bordure en haut de notre logo et un remplissage vertical afin que le logo puisse « respirer » librement.
Styles
Conférence
Logo ( bordure supérieure : 4 px solide #648880 ; remplissage : 40px 0 22px 0 ; float : gauche ; )
Depuis que nous avons créé l'élément floated, nous voulons définir le contenu sur float . Parent immédiat pour est un élément
...
nous y ajouterons donc un cours collectif. Cela lui appliquera les styles clearfix que nous avons définis précédemment. Élément
Contrairement à l'élément cependant, nous n'allons pas appliquer la classe directement à l'élément flottant. Cette fois, nous allons ajouter une classe au parent de l'élément float et utiliser un sélecteur CSS unique pour sélectionner l'élément, puis lui attribuer un float .
Commençons par ajouter la classe Primary-footer à l'élément
Maintenant que la classe de pied de page principal est définie sur l'élément
/* ======================================== Sous-sol principal ====== ==================================== */ .primary-footer small ( float: left; ) Pour vérifier - ici nous sélectionnons l'élément , qui doit être à l'intérieur d'un élément avec la valeur Primary-footer attribut de classe, comme notre élément
Enfin, nous ajouterons un peu de remplissage en haut et en bas de l'élément.
Pied de page principal ( padding-bottom: 44px; padding-top: 44px; )
nous y ajouterons donc un cours collectif. Cela lui appliquera les styles clearfix que nous avons définis précédemment.
Contrairement à l'élément
Commençons par ajouter la classe Primary-footer à l'élément
Maintenant que la classe de pied de page principal est définie sur l'élément
/* ======================================== Sous-sol principal ====== ==================================== */ .primary-footer small ( float: left; )Pour vérifier - ici nous sélectionnons l'élément , qui doit être à l'intérieur d'un élément avec la valeur Primary-footer attribut de classe, comme notre élément
Enfin, nous ajouterons un peu de remplissage en haut et en bas de l'élément.
Pied de page principal ( padding-bottom: 44px; padding-top: 44px; )
En tenant compte de tous ces changements dans les éléments
Riz. 5.01. Utilisation de plusieurs éléments float
Positionnement via un bloc en ligne
En plus d'utiliser float , une autre façon de positionner le contenu consiste à utiliser afficher les propriétés combiné avec la valeur du bloc en ligne. La méthode des blocs en ligne, comme nous le verrons plus tard, est principalement utile pour mettre en page des pages ou pour placer des éléments sur une ligne les uns à côté des autres.
Rappelez-vous que la valeur inline-block de la propriété display affiche les éléments sur une ligne et leur permet de prendre toutes les propriétés du modèle de boîte, notamment height , width , padding , border et margin . L'utilisation de inline-block nous permet de au maximum profitez du modèle en bloc sans vous soucier de supprimer les flotteurs.
bloc en ligne en pratique
Jetons un coup d'œil à notre exemple à trois colonnes depuis le début. Nous allons commencer par enregistrer notre HTML comme ceci :
Maintenant, au lieu de flotter pour nos trois éléments
Section ( affichage : bloc en ligne ; marge : 0 1,5 % ; largeur : 30 % ; )
Malheureusement, ce code à lui seul ne suffit pas à faire l'affaire et dernier élément
Démonstration d'éléments de bloc en ligne avec espace
Suppression de l'espace entre les éléments de bloc en ligne
Il existe plusieurs méthodes pour supprimer l'espace entre les éléments de bloc en ligne, et certaines sont plus complexes que d'autres. Nous allons nous concentrer sur les deux plus méthodes simples, dont chacun se produit dans HTML.
La première solution est de mettre chaque nouvelle balise d'élément d'ouverture
L'écriture d'éléments de bloc en ligne de cette manière garantit qu'il n'y a pas d'espace entre ces éléments en HTML. Par conséquent, l’espace n’apparaîtra pas lors de l’affichage de la page.
Démonstration d'éléments de bloc en ligne sans espaces
Une autre méthode pour supprimer l'espace entre les éléments de bloc en ligne consiste à ouvrir un commentaire HTML immédiatement après la balise de fermeture de l'élément. Fermez ensuite le commentaire juste avant la balise d'ouverture élément suivant. Cela permet aux éléments de bloc en ligne de commencer et de se terminer sur lignes séparées en HTML et "commentera" tout espace potentiel entre les éléments. Le code résultant ressemblera à ceci :
Aucune de ces options n’est parfaite, mais elles sont utiles. J'ai tendance à utiliser les commentaires pour meilleure organisation, mais l'option que vous choisissez dépend entièrement de vous.
Créer des mises en page réutilisables
Lors de la création d'un site, il est toujours préférable d'écrire des styles modulaires qui peuvent être réutilisés ailleurs, et les mises en page réutilisables figurent en tête de liste du code réutilisable. Les mises en page peuvent être créées à l’aide d’éléments flottants ou de blocs en ligne, mais lequel fonctionne le mieux et pourquoi ?
La question de savoir si les éléments flottants ou en blocs en ligne sont meilleurs pour la structure des pages est ouverte au débat. Mon approche consiste à utiliser des éléments de bloc en ligne pour créer une grille ou une mise en page, puis à utiliser float lorsque je souhaite que le contenu circule. de cet élément(c'est pour cela que les flotteurs ont été conçus lorsque l'on travaille avec des images). En général, je trouve également que les éléments de blocs en ligne sont plus faciles à utiliser.
Cependant, utilisez ce qui vous convient le mieux. Si vous êtes plus familier avec une approche qu’une autre, utilisez-la.
De nouveaux sont actuellement en préparation Spécifications CSS- en particulier les propriétés flex et grid, qui vous aideront à décider de la meilleure façon de disposer les pages. Gardez un œil sur ces méthodes lorsqu’elles commencent à apparaître.
En pratique
Avec une solide compréhension des mises en page réutilisables, il est temps d'en implémenter une sur notre site Styles Conference.
Pour le site Web de Styles Conference, nous créerons une mise en page à trois colonnes en utilisant des éléments de blocs en ligne. Nous ferons cela de manière à obtenir trois colonnes de même largeur, ou deux colonnes dont la largeur totale est divisée entre elles par 2/3 pour l'une et 1/3 pour l'autre.
Tout d’abord, nous allons créer des classes qui définissent la largeur de ces colonnes. Nous appellerons ces deux classes col-1-3 pour un tiers et col-2-3 pour les deux tiers. Dans la section Grid de notre fichier main.css, avançons et définissons ces classes et leurs largeurs correspondantes.
Col-1-3 (largeur : 33,33 % ; ) .col-2-3 (largeur : 66,66 % ; )
Nous voulons que les deux colonnes apparaissent sous forme d'éléments de bloc en ligne. Nous devons également nous assurer que alignement vertical ils l'ont placé en haut de chaque colonne.
Créons deux nouveaux sélecteurs qui partagent display et vertical-align .
Col-1-3, .col-2-3 ( affichage : bloc en ligne ; alignement vertical : haut ; )
Jetez à nouveau un œil à CSS. Nous avons créé deux sélecteurs de classe col-1-3 et col-2-3 séparés par une virgule. Une virgule à la fin du premier sélecteur signifie qu'il est suivi d'un autre sélecteur. Après le deuxième sélecteur vient l'ouverture entretoise, qui informe que la description du style commence. En utilisant une virgule pour séparer les sélecteurs, nous pouvons lier un style à plusieurs sélecteurs en même temps.
Nous souhaitons mettre un peu d'espace entre les colonnes pour aider à diviser le contenu. Cela peut être fait en ajoutant un remplissage horizontal à chaque colonne.
Cela fonctionne bien, cependant, lorsque deux colonnes sont placées l'une à côté de l'autre, la largeur de l'espace entre elles sera deux fois plus large que l'espace depuis le bord extérieur. Pour équilibrer cela, nous placerons toutes nos colonnes dans une grille et y ajouterons le même remplissage.
Utilisons la classe Grid pour définir notre grille, puis donnons le même remplissage horizontal aux classes Grid, Col-1-3 et Col-2-3. Avec à nouveau des virgules séparant nos sélecteurs, notre CSS ressemble à ceci :
Grille, .col-1-3, .col-2-3 ( padding-left : 15px ; padding-right : 15px; )
Lorsque nous définissons un remplissage horizontal, nous devons être prudents. N'oubliez pas que dans la dernière leçon, nous avons créé un conteneur avec la classe conteneur pour centrer tout notre contenu sur la page d'une largeur de 960 pixels. DANS à l'heure actuelle, si nous placions un élément avec la classe grid à l'intérieur d'un élément avec la classe conteneur, alors leur remplissage horizontal s'additionnerait et nos colonnes ne seraient pas affichées proportionnellement à la largeur du reste de la page.
Pour ce faire, nous décomposons l'ancien ensemble de règles du conteneur comme suit :
Conteneur, .grid ( marge : 0 auto ; largeur : 960px ; ) .container ( padding-left : 30px ; padding-right : 30px; )
Désormais, tout élément avec la classe conteneur ou grille aura une largeur de 960 pixels et sera situé au centre de la page. De plus, nous avons conservé le remplissage horizontal existant pour tout élément avec la classe conteneur en le déplaçant vers un nouvel ensemble de règles distinct.
Bon, toute la partie la plus difficile de la configuration du maillage est terminée. Il est maintenant temps de travailler avec notre HTML et de voir comment fonctionnent ces classes.
Nous commencerons par les teasers de la page d'accueil, dans le fichier index.html, alignés sur trois colonnes. Actuellement, les teasers sont enveloppés dans un élément
...
... ... ...
Et enfin, puisque chacune de nos colonnes est un élément de bloc en ligne, nous devons nous assurer de supprimer tout espace blanc entre elles. Pour ce faire, nous utiliserons des commentaires et ajouterons de la documentation à chaque section afin de mieux organiser notre code.
... ... ...
Pour vérifier, nous avons laissé un commentaire à la ligne 3 identifiant la rubrique « Intervenants » qui la suit. A la fin de la ligne 7, on ouvre un commentaire immédiatement après la balise fermante. A l'intérieur de ce commentaire, à la ligne 9 nous définissons la section suivante "Horaire". Fermez ensuite le commentaire au début de la ligne 11, juste avant la balise d'ouverture
Nous disposons désormais d'une grille réutilisable à trois colonnes qui prend en charge différentes mises en page, utilisant des largeurs de colonne de 1/3 et 2/3. Notre page d'accueil contient désormais trois colonnes, séparant tous les teasers.
Riz. 5.02. Maison Page de styles La conférence comprend désormais une présentation en trois colonnes
Démo et code source
Ci-dessous, vous pouvez consulter le site Web de Styles Conference dans son état actuel et également télécharger code source site pour le moment.
Positionnement unique des éléments
Tôt ou tard, tout le monde voudra positionner un élément avec précision, mais les éléments float ou inline-block ne permettent pas une telle astuce. Les éléments flottants qui suppriment un élément du flux de la page produisent souvent des résultats indésirables car les éléments environnants s'enroulent autour de l'élément flottant. Les éléments de bloc en ligne, à moins que nous créions des colonnes, peuvent être assez délicats lorsqu'il s'agit de les positionner correctement. Pour des situations comme celle-ci, nous pouvons utiliser la propriété position en combinaison avec les propriétés de décalage du bloc.
La propriété position détermine comment l'élément est positionné sur la page et s'il sera affiché dans le flux de documents normal. Il est utilisé conjointement avec les propriétés de décalage du bloc top , right , bottom et left , qui déterminent exactement où l'élément sera positionné en le déplaçant dans différentes directions.
Par défaut, la valeur de position de chaque élément est définie sur static , ce qui signifie que l'élément existe dans le flux normal du document et ne prend aucune propriété pour le positionner. La valeur static est le plus souvent écrasée par la valeur relative ou absolue , que nous examinerons ensuite.
Positionnement relatif
Définir la propriété position sur relatif permet aux éléments d'apparaître dans le flux normal de la page, en réservant de l'espace pour l'élément comme prévu et en empêchant d'autres éléments de circuler autour de lui. Cependant, il permet également de modifier la position d'un élément à l'aide des propriétés de décalage. Par exemple, considérons le HTML et le CSS suivants :
Div ( hauteur : 100 px ; largeur : 100 px ; ) .offset ( gauche : 20 px ; position : relative ; haut : 20 px ; )
Démonstration de positionnement relatif
Ici pour le deuxième élément
Pour les éléments positionnés relativement, il est important de savoir que les propriétés de décalage du bloc déterminent où l'élément sera déplacé, compte tenu de sa position d'origine. Ainsi, une propriété left avec une valeur de 20 pixels pousse en fait l'élément vers la droite de 20 pixels. Une propriété top avec une valeur de 20px poussera alors l'élément vers le bas de 20px.
Lorsque nous positionnons un élément à l'aide des propriétés de décalage, l'élément chevauche l'élément situé en dessous, plutôt que de le pousser vers le bas comme le font les propriétés margin ou padding.
Positionnement absolu
La valeur absolue de la propriété position diffère de la valeur relative dans le sens où l'élément en position absolue n'apparaît pas dans le flux normal du document et l'espace et la position d'origine de l'élément en position absolue ne sont pas réservés.
De plus, les éléments en position absolue se déplacent par rapport à leur élément parent en position relative le plus proche. Si un parent positionné de manière relative n'existe pas, alors l'élément en position absolue sera positionné par rapport à l'élément
. Ce n'est pas la plupart information; Voyons comment cela fonctionne dans du code :
Section ( position : relative ; ) div ( position : absolue ; droite : 20px ; haut : 20px ; )
Démonstration de positionnement absolu
Dans cet exemple, l'élément Pour les éléments positionnés relativement, les propriétés de décalage déterminent dans quelle direction l'élément sera déplacé par rapport à lui-même. Pour les éléments positionnés de manière absolue, les propriétés de décalage déterminent dans quelle direction l'élément sera déplacé par rapport à son parent positionné par rapport le plus proche. Grâce aux propriétés right et top, l'élément Puisque l'élément Apprendre à positionner le contenu en HTML et CSS est un grand pas vers la maîtrise de ces langages. Ajoutez à cela modèle de bloc et maintenant nous avançons avec confiance sur la voie de devenir des développeurs front-end.
15.03.2017 Pas encore Salut tout le monde! Propriété "HAUT» | «
GAUCHE» | «
DROITE» | «
BAS
»
Diagramme du système de coordonnées : Les coordonnées sont spécifiées par quatre règles : Syntaxe: Règle_Coordonnée : valeur_coordonnée ; Signification: Haut : 100 px ; /* bord supérieur */ left:100px; /* bord gauche */ Il suffit simplement de préciser les coordonnées de deux arêtes (haut ou bas, gauche ou droite). Propriété "POSITION
»
Syntaxe: Position : valeur ; Signification: Passons en revue chaque valeur. Signification "
ABSOLU" Position : absolue ; /* positionnement absolu*/
Résultat: Signification "RELATIF
»
Position : relative ; /* positionnement relatif*/
CSS signifie Feuilles de Style en Cascade. CSS décrit comment les éléments HTML doivent être affichés à l'écran, sur papier ou sur d'autres supports. CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois. CSS peut être ajouté aux éléments HTML de 3 manières : Inline - en utilisant l'attribut style dans les éléments HTML Interne - en utilisant un élément dans la section Externe - en utilisant un fichier CSS externe La manière la plus courante d'ajouter du CSS est de conserver le styles dans des fichiers CSS séparés. Cependant, nous utiliserons ici le style en ligne et interne, car cela est plus facile à démontrer et plus facile à essayer vous-même. Résultat: Défaut Positionnement relatif Valeur "FIXE" Position : fixe ; /* positionnement fixe */
CSS signifie Feuilles de Style en Cascade. CSS décrit comment les éléments HTML doivent être affichés à l'écran, sur papier ou sur d'autres supports. CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois. CSS peut être ajouté aux éléments HTML de 3 manières : Inline - en utilisant l'attribut style dans les éléments HTML Interne - en utilisant un élément dans la section Externe - en utilisant un fichier CSS externe La manière la plus courante d'ajouter du CSS est de conserver le styles dans des fichiers CSS séparés. Cependant, nous utiliserons ici le style en ligne et interne, car cela est plus facile à démontrer et plus facile à essayer vous-même. Si le résultat n'est pas visible ou clair, ajoutez suffisamment de texte pour créer une barre de défilement sur l'écran de la page Web. C'est tout pour la leçon ! Il ne reste plus que 2 ou 3 leçons et vous aurez fini de maîtriser les bases du CSS. Cela signifie que vous pouvez facilement créer de superbes sites Web. Article précédent DANS Langage HTML Tous les éléments peuvent être divisés en bloc et en ligne. Les éléments de bloc sont généralement représentés sous forme de zones rectangulaires contenant une certaine quantité d'informations. Avec leur aide, la grille des pages est construite. De tels éléments occupent tout l'espace dont ils disposent en largeur, et il y a généralement un saut de ligne avant et après eux. Les blocs peuvent recevoir des retraits, des dimensions horizontales et verticales. Les balises de bloc incluent des balises qui mettent en évidence grand nombre informations textuelles: CV
Dans le didacticiel d'aujourd'hui, je vais vous montrer comment utiliser le positionnement des blocs pour placer un élément n'importe où sur l'écran.
Que nous apporte le positionnement des blocs ? Avec l'aide du positionnement des blocs, un webmaster pourra créer n'importe quel design de site Web unique, en plaçant les blocs là où il le souhaite. Pour placer des blocs n'importe où sur l'écran, spécifiez simplement les coordonnées.Coordonnées en CSS
Les coordonnées doivent être spécifiées pour le positionnement des blocs, c'est-à-dire l'endroit où le bloc sera placé.
Spécifiez la valeur en px ou %.Positionnement en CSS
Le positionnement est écrit en CSS via la règle « position » avec la valeur souhaitée.
Le positionnement absolu permet au webmaster de placer des blocs sur une page Web n'importe où sur l'écran. Il suffit d'écrire la règle « position » en CSS avec la valeur « absolue » et les coordonnées requises :
Le positionnement relatif permet à un webmaster de déplacer un bloc sur une page Web, mais l'espace d'origine du bloc n'est pas libéré pour un autre élément. En CSS, écrivez la règle « position » avec la valeur « relative » et les coordonnées souhaitées :
Positionnement fixe en CSS
Le positionnement fixe permet au webmaster de placer des blocs sur une page Web n'importe où sur l'écran, et lors du défilement de la page Web, le bloc sera toujours positionné par rapport à la fenêtre du navigateur (sera toujours visible à l'écran). Il suffit d'écrire la règle "position" en CSS avec la valeur "fixe" et les coordonnées requises :
Ne manquez pas le reste des cours ! Abonnez-vous aux mises à jour !
Entrée suivante Caractéristiques des éléments de bloc