CSS

Utilisation de la propriété display pour contrôler le type d'affichage des éléments

La propriété display en CSS permet de contrôler le type d'affichage d'un élément. Elle détermine comment l'élément est rendu dans le flux de la page. Il existe plusieurs valeurs pour la propriété display, chacune ayant un effet différent sur la disposition et le comportement des éléments.


1. display: block :

  • Les éléments avec display: block occupent toute la largeur disponible et commencent sur une nouvelle ligne.
  • Par défaut, les balises <div>, <p>, <h1> à <h6>, <header>, <footer>, <section>, <article>, <nav> et <ul> ont un affichage en bloc.


.block-element {
    display: block;
}


2. display: inline :


  • Les éléments avec display: inline ne démarrent pas sur une nouvelle ligne et ne prennent que la largeur nécessaire.
  • Ils s'alignent horizontalement les uns à côté des autres dans le flux du texte.
  • Par défaut, les balises <span>, <a>, <strong>, <em>, <img>, <abbr>, <input>, <button> et <label> ont un affichage en ligne.


.inline-element {
    display: inline;
}


3. display: inline-block :


  • Les éléments avec display: inline-block se comportent comme des éléments en ligne, mais ils peuvent également avoir une largeur et une hauteur définies.
  • Ils s'alignent horizontalement les uns à côté des autres et peuvent être manipulés comme des blocs.
  • Ils conservent le comportement en ligne, mais permettent de définir des propriétés de largeur, hauteur, rembourrage et marge.


.inline-block-element {
    display: inline-block;
}


4. display: none :


  • Les éléments avec display: none ne sont pas rendus et ne prennent pas de place dans le flux du document.
  • Ils sont complètement cachés et ne sont pas accessibles aux utilisateurs.


.hidden-element {
    display: none;
}


5. display: flex :


  • Les éléments avec display: flex deviennent un conteneur flex, ce qui permet de manipuler facilement l'alignement, la distribution et l'ordre des éléments enfants.
  • Les éléments enfants de l'élément flex sont disposés horizontalement ou verticalement, en fonction des valeurs des propriétés flex-direction, flex-wrap et justify-content.


.flex-container {
    display: flex;
}


6. display: grid :


  • Les éléments avec display: grid deviennent un conteneur de grille, ce qui permet de définir facilement une disposition en grille complexe pour les éléments enfants.
  • Les éléments enfants peuvent être disposés en lignes et colonnes, avec un contrôle précis sur leur placement et leur dimensionnement.


.grid-container {
    display: grid;
}


Impact sur la Mise en Page et le Positionnement :


  • Le choix de la valeur display affecte la disposition et le comportement des éléments sur la page.
  • Il permet de créer des mises en page flexibles et réactives en contrôlant la façon dont les éléments sont rendus et organisés dans le flux du document.


Conseils pour une Utilisation Efficace :


  • Choisissez la valeur display appropriée en fonction de l'objectif de mise en page et du comportement souhaité pour les éléments.
  • Expérimentez avec les différentes valeurs display pour créer des mises en page dynamiques et esthétiques.


En résumé, la propriété display en CSS permet de contrôler le type d'affichage des éléments, influençant ainsi leur disposition et leur comportement sur la page. En comprenant comment chaque valeur display fonctionne, vous pouvez créer des mises en page Web efficaces et esthétiques.

877 vues
Posté le 15 mai 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
1 690 vues
Demande d'amis en PHP (3/3)
Pour cette troisième vidéo nous allons revoir notre système afin de conserver le statut de la relation lorsqu'on bloque et débloque un utilisateur.
Créer son site de rencontres
10 674 vues
Afficher tous vos utilisateurs
Dans cet article nous allons afficher tous les utilisateurs de notre base de données afin qu'un utilisateur puisse accéder à n'importe quel profil d'un autre utilisateur par la...
Créer son site
3 885 vues
Afficher un topic
Afficher un topic de notre forumDans notre dossier f_forum, nous allons créer une nouvelle page topic.php. Cette page affichera le topique créé par un de vos utilisateur.Nous allons...
Créer son site
1 975 vues
Utilisation de l'instruction SQL INSERT INTO pour ajouter des données à une table
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
12 247 vues
Visiter un profil PHP
Pour visiter le profil d'un autre utilisateur il nous faudra récupérer son ID passer en argument dans l'URL par la méthode $_GET et afficher ses informations comme pour...
Créer son site
264 vues
Utilisation de l'élément <li> pour les éléments de liste
Utilisation de l'élément <li> pour les éléments de listeL'élément <li> est utilisé pour définir chaque élément individuel d'une liste, qu'elle soit ordonnée <ol> ou non...
HTML
2 322 vues
Messagerie interne
Maintenant que vous avez créé votre nouvelle base de données pour notre messagerie interne nous allons ajouter à la main quelques lignes pour afficher la liste des messageries entre vous et les...
Créer son site de rencontres
331 vues
Paramètres de fonction
Les paramètres de fonction en PHP permettent de passer des valeurs à une fonction pour qu'elle puisse effectuer des opérations sur ces valeurs. Voici un cours facile à comprendre sur les...
PHP
Publicité
Cette pub permet au site de vivre ...