033.4 Lezione 1

Il modo predefinito in cui il browser mostra l’albero dei documenti è chiamato flusso normale. I rettangoli corrispondenti agli elementi sono posizionati più o meno nello stesso ordine in cui appaiono nell’albero del documento, rispetto ai loro elementi principali. Tuttavia, a seconda del tipo di elemento, il riquadro corrispondente può seguire regole di posizionamento distinte.

Un buon modo per capire la logica del flusso normale è rendere visibili i contenitori. Possiamo iniziare con una pagina molto semplice, con solo tre elementi div separati, ognuno dei quali ha un paragrafo con testo casuale:

Ogni parola è in un elemento span, così possiamo dare uno stile alle parole e vedere come vengono trattate anche come caselle. Per rendere visibili i contenitori, dobbiamo modificare il file del foglio di stile style.css cui fa riferimento il documento HTML. Le seguenti regole implementeranno ciò di cui abbiamo bisogno:

Il risultato viene mostrato in Figure 1.

Figure 1 mostra che ogni tag HTML ha una casella corrispondente nel layout. Gli elementi div, h2 e p si estendono alla larghezza del loro elemento principale. Per esempio, l’elemento genitore degli elementi div è l’elemento body, quindi si estendono alla larghezza del corpo, mentre il genitore di ogni elemento h2 e p è il suo corrispondente div. I contenitori che si estendono fino alla larghezza del loro elemento pricipale sono chiamati elementi block. Alcuni dei più comuni tag HTML resi come blocchi sono h1, h2, h3, p, ul, ol, table, li, div, section, form, e aside. Gli elementi di blocco “gemelli” — elementi di blocco che condividono lo stesso elemento genitore — sono impilati all’interno del loro genitore dall’alto verso il basso.

Oltre al testo stesso, elementi come h1, p e li si aspettano solo elementi inline come figli. Come la maggior parte dei testi occidentali, gli elementi inline seguono il flusso di testo da sinistra a destra. Quando non c’è più spazio nella parte destra, il flusso degli elementi inline continua nella riga successiva, proprio come il testo. Alcuni tag HTML comuni trattati come contenitori inline sono span, a, em, strong, img, input e label.

Nella nostra pagina HTML di esempio, ogni parola all’interno dei paragrafi era inserita all’interno di un tag span, in modo da poter essere evidenziata con una regola CSS corrispondente. Come mostrato nell’immagine, ogni elemento span è posizionato orizzontalmente, da sinistra a destra, finché non c’è più spazio nell’elemento principale.

L’altezza dell’elemento dipende dal suo contenuto, così il browser regola l’altezza di un elemento contenitore per ospitare i suoi elementi a blocchi annidati o le linee di elementi in linea. Tuttavia, alcune proprietà CSS influenzano la forma di un contenitore, la sua posizione e il posizionamento dei suoi elementi interni.

Le proprietà margin e padding influenzano tutti i tipi di casella. Se non si impostano esplicitamente queste proprietà, il browser ne imposta alcune utilizzando valori standard. Come visto in Figure 1, gli elementi h2 e p sono stati resi con uno spazio tra di loro. Questi spazi sono i margini superiori e inferiori che il browser aggiunge di default a questi elementi. Possiamo rimuoverli modificando le regole CSS per i selettori h2 e p:

Il risultato appare in Figure 2.

L’elemento body ha anche, per impostazione predefinita, un piccolo margine che crea uno spazio circostante. Anche questo spazio può essere rimosso usando la proprietà margin..

Mentre la proprietà margin definisce lo spazio tra l’elemento e ciò che c’è intorno, la proprietà padding dell’elemento definisce lo spazio interno tra i limiti del contenitore e i suoi elementi figli. Considera gli elementi h2 e p all’interno di ogni div nel codice di esempio. Potremmo usare la loro proprietà margin per creare uno spazio ai bordi del corrispondente div, ma è più semplice cambiare la proprietà padding del contenitore:

Solo la regola per il secondo div è stata modificata, quindi i risultati (Figure 3) mostrano la differenza tra il secondo div e gli altri contenitori div.

La proprietà margin è un’abbreviazione per quattro proprietà che controllano i quattro lati del contenitore: margin-top, margin-right, margin-bottom e margin-left. Quando a margin è assegnato un singolo valore, come negli esempi usati finora, tutti e quattro i margini del box lo usano. Quando sono scritti due valori, il primo definisce i margini superiore e inferiore, mentre il secondo definisce i margini destro e sinistro. Usando margin: 1em 2em, per esempio, si definisce uno spazio di 1 em per i margini superiore e inferiore e uno spazio di 2 em per i margini destro e sinistro. Scrivere quattro valori imposta i margini per i quattro lati in senso orario, iniziando dall’alto. I diversi valori nella proprietà non sono tenuti a usare le stesse unità.

Anche la proprietà padding è un’abbreviazione che segue gli stessi principi della proprietà margin.

Nel loro comportamento predefinito, gli elementi del blocco si allungano per adattarsi alla larghezza disponibile. Ma questo non è obbligatorio. La proprietà width può impostare una dimensione orizzontale fissa per il contenitore:

L’aggiunta di width: 6em alla regola CSS restringe il primo div orizzontalmente, lasciando uno spazio vuoto alla sua destra (Figure 4).

Invece di lasciare il primo div allineato a sinistra, potremmo volerlo centrare. Centrare un box equivale a impostare margini della stessa dimensione su entrambi i lati, quindi possiamo usare la proprietà margin per centrarlo. La dimensione dello spazio disponibile può variare, quindi usiamo il valore auto per i margini destro e sinistro:

I margini sinistro e destro sono calcolati automaticamente dal browser e il contenitore sarà centrato (Figure 5).

Come mostrato, rendere più stretto un elemento del blocco non rende lo spazio rimanente disponibile per l’elemento successivo. Il flusso naturale è ancora conservato, come se l’elemento più stretto occupasse ancora tutta la larghezza disponibile.

Il flusso normale è semplice e sequenziale. I CSS ti permettono anche di interrompere il flusso normale e posizionare gli elementi in modi molto specifici, anche scavalcando lo scorrimento della pagina. Vedremo diversi modi per controllare il posizionamento degli elementi in questa sezione.

Sappiamo che i CSS forniscono proprietà che regolano le dimensioni degli elementi e dei caratteri in relazione all’area dello schermo disponibile. Tuttavia, potresti voler andare oltre e usare un design diverso per dispositivi diversi: per esempio, sistemi desktop rispetto a dispositivi con schermi di dimensioni inferiori a una certa misura. Questo approccio è chiamato responsive web design, e i CSS forniscono metodi chiamati media queries per renderlo possibile.

Nell’esempio precedente, abbiamo modificato il layout della pagina per mettere gli elementi div uno accanto all’altro in colonne. Questo layout è adatto a schermi più grandi, ma sarà troppo ingombrante in schermi più piccoli. Per risolvere questo problema, possiamo aggiungere una media query al foglio di stile che corrisponda solo agli schermi con almeno 600px di larghezza:

Le regole CSS all’interno della direttiva @media saranno usate solo se il criterio tra parentesi è soddisfatto. In questo esempio, se la larghezza della finestra è inferiore a 600px, la regola non sarà applicata al contenitore div e i suoi figli saranno resi come elementi convenzionali div. Il browser rivaluta le media query ogni volta che la dimensione della finestra cambia, così il layout può essere cambiato in tempo reale mentre si ridimensiona la finestra del browser o si ruota lo smartphone.