A retenir !

• Les navigateurs placent les éléments d'une page dans un flux. Les éléments de type bloc se placent de haut en bas, chacun séparé du suivant par un saut de ligne. Ils prennent par défaut toute la largeur de la fenêtre du navigateur. Les éléments en-ligne se placent de gauche à droite dans l'élément de bloc. Si plusieurs lignes sont nécessaires, c'est le navigateur qui en crée une nouvelle et agrandit la hauteur de l'élément de type bloc pour inclure tous les éléments en-ligne concernés.
• Les marges haut et bas de deux éléments de type bloc attenants fusionnent et la marge qui en résulte est à la taille de la plus grande des deux.
• Les éléments flottants sont extraits du flux et placés sur la droite ou sur la gauche. Ils se placent au-dessus des éléments de type bloc et n'ont aucun impact sur leur flux. Par contre, le contenu en ligne d'un élément de type bloc respecte les limites d'un élément flottant en l'habillant.
• La propriété clear spécifie qu'aucun élément flottant ne peut se situer à droite ou à gauche d'un élément de type bloc. Dans ce cas, l'élément de type bloc se déplace vers le bas jusqu'au moment où il se retrouve seul.
• La largeur d'un élément flottant doit toujours être indiquée et sa valeur ne peut pas être auto.
• Le contenu d'un design adaptatif occupe toute la place sur la page, quelle que soit la taille de la fenêtre du navigateur.
• Le contenu d'un design fixe ne bouge jamais, quelle que soit la taille de la fenêtre du navigateur. Il permet de mieux contrôler la mise en pages mais n'utilise pas toute la surface utile du navigateur.
• Le contenu d'un design fluide a une largeur fixe, mais ses marges varient selon la taille de la fenêtre du navigateur. Le contenu de la page est généralement centré. Il a les mêmes atouts qu'un design fixe tout en étant plus séduisant.
• La propriété position peut être static, absolute, fixed et relative. Par défaut, sa valeur est static, c'est-à-dire qu'elle place l'élément dans le flux normal de la page.
• Les propriétés top, right, bottom et left servent à placer les éléments dans le cadre d'un positionnement absolu, fixe et relatif.
• Un positionnement absolu permet de placer les éléments n'importe où. Ils sont placés par défaut par rapport aux bords de la page. Quand un élément positionné dans l'absolu est imbriqué dans un autre élément positionné lui aussi en absolu, sa place est relative à la position de l'élément qui le contient. Notons finalement que les éléments positionnés en absolu peuvent s'empiler, leur niveau dans la pile étant alors déterminé par la propriété z-index.
• Les éléments dont le positionnement est fixe sont placés en fonction de la taille de la fenêtre du navigateur et ne bougent pas lorsque la page défile. Les autres éléments de la page défilent sous ces éléments.
• Les éléments dont le positionnement est relatif sont d'abord inclus dans le flux normal puis décalés selon la valeur indiquée et laissent vide l'espace qu'ils devraient occuper. Dans ce cas, les propriétés top, right, bottom et left se réfèrent à la taille du décalage donné à partir de la position normal de l'élément dans le flux.
• Le flottement est une solution qui s'adapte bien aux mises en pages sur plusieurs colonnes et permet aux éléments de se débarrasser des éléments adjacents avec la propriété clear, ce qui est impossible avec le positionnement absolu.