10 astuces d'intégration html css

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.