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.

667 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
4 855 vues
Les outils pour développer
Avant de vous lancer dans le développement il reste encore quelques prérequis qui sont les logiciels que vous allez utiliser afin de concevoir votre site !Ce qui vous manque actuellement c'est...
Créer son site
557 vues
CSS externe : l'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTML
CSS Externe : L'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTMLLe CSS externe est une méthode de stylisation où les styles sont définis dans des fichiers CSS distincts et...
CSS
308 vues
Déclaration de fonctions
Les fonctions en PHP sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code en le divisant en tâches plus petites et plus gérables. Voici...
PHP
7 854 vues
Déconnexion PHP
Maintenant que nos utilisateurs peuvent se connecter à notre site, il faut également qu'ils puissent se déconnecter.Pour cela, il faut créer une nouvelle...
Créer son site
2 481 vues
Personnaliser sa bare de menu avec du CSS
Après avoir modifié notre barre de menu nous allons maintenant personnaliser notre barre de menu avec du CSS afin de la rendre plus agréable à regarder.Nous allons pour ça ajouter un nouveau...
Créer son site de rencontres
1 274 vues
Afficher plus de conversation
Dans cette avant-dernière vidéo sur la création d’une messagerie interne nous allons personnaliser rapidement la page pour afficher les conversations et nous allons également corriger /...
Créer son site de rencontres
1 859 vues
Nesting : Organiser le code CSS en utilisant le nesting pour des sélecteurs imbriqués
Nesting en SASS : Organiser le code CSS avec des sélecteurs imbriqués1. Utilisation du nesting :En SASS, vous pouvez organiser votre code CSS en utilisant le nesting pour des sélecteurs...
Sass
4 718 vues
Comment débute-t-on ?
Maintenant que vous savez qu'elles sont les différents langages web à utiliser pour développer un site, vous devez certainement vous demander "Alors, comment développe-t-on un site...
Créer son site
Publicité
Cette pub permet au site de vivre ...