Flux, éléments et dimensions de base

Les éléments HTML se distinguent en éléments de bloc et éléments en ligne.

Éléments de bloc

Ces éléments occupent toute la largeur disponible et commencent sur une nouvelle ligne. Des exemples courants incluent div, li et table.

Éléments en ligne

Ils s'affichent en séquence horizontale, similaire au texte, sans saut de ligne. On trouve des balises comme span et label.

Modèle de boîte

Le modèle de boîte comprand plusieurs types : border-box, margin-box, padding-box et content-box. Par défaut, les propriétés width et height affectent la boîte de contenu. L'attribut box-sizing permet de modifier cette comportement.

* {
  box-sizing: border-box;
}

Modèle de boîte pour les éléments en ligne

On distingue : la zone de contenu (autour du texte), la boîte externe de l'élément, la boîte de ligne pour chaque rangée, et la boîte englobante formée par l'ensemble des lignes.

Nœud espace fantôme

Appelé strut, il précède chaque boîte de ligne, possède les propriétés de police et de hauteur de ligne de l'élément, avec une largeur nulle.

Éléments en ligne et flux

Caractère x

La ligne de base du texte correspond au bord inférieur du glyphe « x » dans la police utilisée.

Hauteur de ligne

La hauteur de ligne est contrôlée par line-height. Une valeur numérique comme 1.5 signifie 1.5 fois la taille de la police. L'espacement entre lignes est réparti à moitié au-dessus et au-dessous : (line-height - font-size)/2.

Alignement vertical

La propriété vertical-align gère l'alignement du texte. baseline et middle se réfèrent au glyphe « x », tandis que top et bottom s'alignent sur la boîte de ligne.

Altération et préservation du flux

L'utilisation de width et float sur un div peut perturber le flux ; il est recommandé de l'éviter.

Positionnement

Les éléments restent à leur position initiale lorsqu'aucun positionnement n'est appliqué.

Bloc englobant

Le bloc englobant sert de référence pour le calcul et le positionnement des éléments. Pour l'élément racine, il correspond à la fenêtre du navigateur. Pour un positionnement relative ou static, il est défini par la boîte de contenu de l'ancêtre le plus proche. fixed utilise le bloc initial, et absolute se base sur l'ancêtre positionné le plus proche.

Profondeur z-index

L'ordre de superposition est le suivant : 1. contexte d'empilement d'arrière-plan/bordure, 2. z-index négatif, 3. boîtes de bloc, 4. boîtes flottantes, 5. boîtes en ligne, 6. z-index auto ou 0, 7. z-index positif. Les règles sont : la valeur la plus élevée domine, et en cas d'égalité, le dernier élément défini prend le dessus.

Les contextes d'empilement sont créés par : l'élément racine, un z-index numérique, ou certaines propriétés CSS3.

Gestion du texte

Polices personnalisées

@font-face {
  font-family: 'MaPolice';
  src: url('chemin/police.woff');
}

Affichage et masquage des éléments

Plusieurs méthodes permettent de contrôler la visibilité : display, visibility, clip, z-index, et opacity.