Ai folli che si stanno addentrando nel meraviglioso mondo di CSS come me, voglio dare un consiglio per evitare inutili mal di testa. Ogni volta che si affronta un problema di indentazione e/o impaginazione, bisogna tenere sempre ben a mente 2 fondamentali proprietà CSS: display e position.

Display – La migliore definizione che ho trovato è in assoluto questa su StackOverflow.com. I 3 valori “inline”, “block” e “inline-block” sono quelli storici e più usati, il nuovo valore “flex” è quello da studiare subito dopo. I valori “table”, “table-row” e “table-cell” li troveree spesso ma sono abusati. Una volta assorbiti i fondamenti, ricordatevi che alcuni tag HTML sono per default elementi-blocchi (lista completa) mentre i rimanenti sono elementi inline (lista completa).

Position – Causerà parecchi grattacapi. La migliore spiegazione che ho trovato è questa. Come si evince dal tutorial, “position” ha un doppio legame anche con le proprietà “float” e “clear”. Queste 3 proprietà insieme verranno molto usate.

Imparare la teoria “su carta” di queste proprietà è stupendo, fa sembrare tutto semplice, ma quando ci si trova con decine di layer innestati, ognuno con definizioni differenti, si fa molta fatica a seguire il significato logico dei vari elementi HTML. Se ogni volta che vi scontrate con codice HTML + CSS sentite una forte sensazione di frustrazione interna, sappiate che è un disagio assolutamente NORMALE!!!