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.

680 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
270 vues
Grid : organiser les éléments dans un système de grille
Grid : Organiser les Éléments dans un Système de GrilleCSS Grid est une méthode de disposition en CSS qui permet de créer des systèmes de grille complexes pour organiser les éléments sur une...
CSS
2 190 vues
Modifier ses informations en PHP
Dans cette nouvelle vidéo nous allons apprendre à modifier vos informations !Lors de l’inscription il se peut que vous ayez fait une erreur. C'est pour cela que cette page sera importante pour...
Créer son site de rencontres
11 704 vues
Barre de recherche : Ajax
À partir de maintenant nous allons développer notre script permettant de contacter une page et de l'exécuter afin d'afficher le résultat de notre saisie.Nous allons commencer par mettre cette...
Créer son site
1 898 vues
Envoyer un message sans recharger la page (1/2)
Nous allons améliorer notre messagerie interne vu que nous pouvons désormais envoyer et recevoir des messages.Pour cela nous allons utiliser du JavaScript avec de l'Ajax afin de faire des...
Créer son site de rencontres
1 682 vues
Accepter ou refuser une demande d'amis
Nous allons enfin terminer notre système d'amis en permettant à l'utilisateur d'accepter ou de refuser une ou plusieurs demande grâce à une liste contenant toutes les demandes que l'utilisateur...
Créer son site de rencontres
3 561 vues
Créer un topic
Créer un topicDans notre dossier **f_forum**, nous allons créer une nouvelle page creer_topic.php. Cette page permettra à vos utilisateurs de pouvoir créer un topic afin de demande de l'aide,...
Créer son site
3 256 vues
Mise en évidence du texte avec <em>, <strong>, <u> et <s>
Mise en évidence du texte avec <em>, <strong>, <u> et <s>Les balises <em>, <strong>, <u> et <s> sont utilisées pour mettre en évidence le texte dans...
HTML
243 vues
Les promesses
Les Promesses en JavaScriptLes promesses sont un mécanisme de gestion asynchrone en JavaScript qui permet de gérer plus facilement les opérations asynchrones et d'éviter le "callback hell". Les...
JS
Publicité
Cette pub permet au site de vivre ...