Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Attribut DISPLAY

Rôle

L’attribut display permet de changer le mode d’affichage dans le flux HTML (disposition par défaut des éléments). Ce changement entraînera un comportement différent de cet élément…

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.display

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 300px;
  margin: 5px;
  display: inline;
}
#gauche{
  background-color: silver;
}
#droite{
  background-color: pink;
}
h1{
  background-color: orange;
  display: inline;
}

– Le code HTML

<div id="gauche">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Repudiandae, possimus in quod totam mollitia ipsam quia tenetur porro distinctio dignissimos,fugit odio quas ipsa. Omnis iure aliquam maxime incidunt inventore.</div>
<div id="droite">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Repudiandae, possimus in quod totam mollitia ipsam quia tenetur porro distinctio dignissimos.</div>
<h1>Titre</h1>

Résultat

Comportement normal dans le flux HTML

Comportement modifié : les éléments se comportent comme des balises inlines (display:inline)

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera
L’attribut display est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 8

Valeurs

Les différentes valeurs de l’attribut display sont:

none
L’élément ne s’affiche pas dans la page (quitte le flux)
Syntaxe :
display : none Survolez la zone grise pour la faire disparaître

block
L’élément ne comporte comme un élément de type block
Syntaxe :
display : block Survolez la zone de texte pour les transformer en blocs

inline
L’élément ne comporte comme un élément de type inline
Syntaxe :
display : inline Survolez les blocs pour les transformer en éléments inline

inline-block
L’élément ne comporte comme un élément de type inline (dans le sens qu’il est disposé en ligne) mais aussi comme un élément bloc (est traité comme une boîte)
Syntaxe :
display : inline-block Survolez les blocs pour les transformer en éléments inline-block

table-cell
L’élément ne comporte comme une cellule de tableau (<td>)
Syntaxe :
display : table-cell Survolez les blocs pour les transformer en cellules de tableau

flex
L’élément ne comporte comme un conteneur flexible (nouveau en CSS3)
Syntaxe :
display : flex Survolez les blocs pour les transformer en boites flexibles

table
L’élément ne comporte comme un tableau
Syntaxe :
display : table
table-column
L’élément ne comporte comme une balise colonne de tableau (<col>)
Syntaxe :
display : table-column
table-caption
L’élément ne comporte comme une balise caption de tableau (<caption>)
Syntaxe :
display : table-caption
table-row
L’élément ne comporte comme une ligne de tableau (<tr>)
Syntaxe :
display : table-row
table-column-group
L’élément ne comporte comme un groupe de colonnes (<colgroup>)
Syntaxe :
display : table-column-group
table-header-group
L’élément ne comporte comme une entête de tableau (<thead>)
Syntaxe :
display : table-header-group
table-footer-group
L’élément ne comporte comme un pied de tableau (<tfoot>)
Syntaxe :
display : table-footer-group
table-row-group
L’élément ne comporte comme le corps d’un tableau (<tbody>)
Syntaxe :
display : table-row-group
inline-flex
L’élément ne comporte comme un conteneur flexible (nouveau en CSS3) en ligne
Syntaxe :
display : inline-flex
inline-table
L’élément ne comporte comme un tableau en ligne
Syntaxe :
display : inline-table
list-item
L’élément ne comporte comme un élément d’une liste
Syntaxe :
display : list-item
run-in
L’élément ne comporte comme un élément en bloc ou en ligne , selon le contexte
Syntaxe :
display : run-in
initial
Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
display : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
display : inherit

A voir aussi

clear– position– z-index– flex– align-content– align-items– align-self– columns– vertical-align

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »
MegaphoNews - Closer Than Ever

The leading news agency comes to your smartphone.  Download now.

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.