Voici quelques petites astuces pour les intégrateurs web
1) Z-index ne fonctionne pas :
z-index ne fonctionne que sur les éléments positionnés (Ah ok je fais quoi alors : => position:relative; )
2) Z-index 20 au dessus de z-index 100 pourquoi ? :
Il y a certainement des contextes d'empilement différents (un parent différent avec un z-index).
3) Clear ça sert à quoi ?
clear : left / right / both : Il sert à faire un espèce de retour chariot à gauche / droite / les deux.
4) Mon bloc prend toute la place pourquoi ?
Justement parce que c'est un bloc (display:block;)... mettre display:inline si vous voulez qu'il prenne la place qu'il a besoin.
5) Je veux fixer les dimensions de mon élément, mais c'est un display:inline.
C'est pour cela qu'il existe la valeur de la proprété display : "inline-block".
6) Vertical-align ne fonctionne pas :
Vertical align ne fonctionne que sur les cellules de tableau, donc display:table-cell; ou display:table-row;
7) Je souhaite que mes deux blocs cote à cote aient la même hauteur, et si possible non fixé :
Il faut les mettre en display:table-cell; et si possible mettre le conteneur parent en table-row.
8) Quand je change les paddings mon bloc change de taille :
Oui les padding ne comprenne pas la taille du bloc (content-box), il faut donc spécifier : box-sizing:border-box; maintenant les bordures et le padding sont inclus, les margins quand à eux sont toujours exclus.
9) Un élément de type bloc prend width:100%; par défaut !
10) N'oubliez pas le reset css (https://meyerweb.com/eric/tools/css/reset/).
En espérant que ça puisse servir à quelques uns.