Alcuni browser interpretano il concetto di larghezza in modo piuttosto approssimativo, anche se la specifica CSS afferma chiaramente che la larghezza è la somma dei seguenti parametri: la larghezza del blocco stesso (larghezza), riempimento (margine), margini (rivestimento) e bordi (bordo ). L'esempio 2 mostra come creare un livello che contenga tutti questi componenti.

Esempio 2 Larghezza strato

Come risultato di questo esempio, otteniamo un livello con una larghezza di 342 pixel. Sulla fig. 1 mostra cosa costituisce la larghezza del livello.

Fig 1. Larghezza elemento blocco

In quel caso quandonon è specificato nel codice, Internet Explorer assume il valore della proprietà width come larghezza dell'intero blocco.

Diamo un'occhiata a un altro esempio relativo alla larghezza. Per impostazione predefinita, la larghezza del livello è impostata su auto, che consente al livello di adattarsi alla finestra del browser senza tenere conto dei valori dei margini impostati. Se modifichi la larghezza al 100%, quando aggiungi un valore di riempimento, margine o bordo, apparirà inevitabilmente una barra di scorrimento orizzontale.

Per ottenere un risultato universale, ci sono diversi approcci. L'esempio 3 mostra la creazione di tre livelli la cui larghezza è definita come percentuale.

Esempio 3 Percentuale larghezza strato

Il risultato dell'esempio è mostrato in Fig. 2.

Riso. 2. Visualizza la larghezza dei livelli nel browser

La larghezza del primo livello in questo esempio (layer1 ) è impostata su 100%, il che comporta la visualizzazione di una barra di scorrimento orizzontale. Anche per il secondo livello (layer2 ) la larghezza è impostata al 100%, ma i margini sono definiti per il paragrafo interno (tag

). Per questo motivo, la larghezza del livello in tutti i browser sarà la stessa. Il terzo livello (layer3 ) non ha affatto la proprietà width, quindi è definito per impostazione predefinita, auto . In questo caso, il livello occuperà l'intera larghezza della finestra del browser senza strisce orizzontali.

Il modo in cui si imposta la larghezza dipende dal layout utilizzato e dalla scelta dello sviluppatore, ma in ogni caso è necessario tenere conto delle peculiarità degli elementi del blocco e creare un codice universale.

Altezza

Con l'altezza degli elementi del blocco, la situazione è simile alla larghezza. Il browser prende il valore della proprietà height come altezza del livello e vi aggiunge il valore di margin , padding e border. Se l'altezza del livello non è impostata in modo esplicito, viene calcolata automaticamente in base al volume del contenuto.

Diciamo che un livello ha un'altezza in pixel e il contenuto del livello è univocamente superiore all'altezza specificata (esempio 4).

Esempio 4: Altezza strato

Il risultato di questo esempio è mostrato in Fig. 3.

Riso. 3. Blocca l'altezza in diversi browser

Si può vedere che il browser lascia invariata l'altezza, a causa della quale il testo non si adatta al blocco ed è sovrapposto al livello.

Colore di sfondo

Il modo più semplice per impostare il colore di sfondo di un elemento è tramite la proprietà generica background. Lo sfondo viene riempito con un'area definita dai valori di larghezza, altezza e riempimento (Figura 4).

Riso. 4. L'area del livello che viene riempita con il colore di sfondo

Pertanto, il margine non partecipa alla formazione dell'area colorata.

frontiere

A causa della differenza negli approcci dei browser durante la formazione di elementi di blocco, c'è anche una differenza nella visualizzazione dei bordi. Internet Explorer 7 disegna il bordo all'interno del blocco, mentre Firefox lo disegna all'esterno. Ma se utilizziamo un riempimento di sfondo, vedremo un'immagine completamente opposta (Fig. 5). E tutto perché Firefox (Opera) imposta il colore di sfondo sul bordo esterno del bordo e Internet Explorer - all'interno. A partire dalla versione 8.0 Internet Explorer ha modificato lo stile di visualizzazione del frame, esso viene disegnato all'interno del blocco, come in Firefox.

ma. Internet Explorer 7

B. Firefox, Internet Explorer 8+

Riso. 5. Visualizzazione frame nei browser

L'esempio 5 mostra come scrivere codice per ottenere un tale bordo.

Esempio 5. Cornice tratteggiata

Le differenze nell'approccio dei browser durante il disegno dei bordi sono evidenti solo su sfondi colorati e linee tratteggiate. Per un bordo solido, l'aspetto del livello nei browser sarà quasi lo stesso.

Sommario

Gli elementi a blocchi fungono da materiale da costruzione principale durante la disposizione delle pagine Web. Tali elementi sono caratterizzati dal fatto che iniziano sempre su una nuova riga e occupano l'intera larghezza disponibile dell'area in cui si trovano.

La specifica CSS definisce che l'altezza e la larghezza di un elemento sono determinate non solo dai valori di altezza e larghezza, ma anche dal valore di margini, riempimento e bordi. I browser a questo proposito sono divisi in due parti: alcuni supportano la specifica in questa materia, mentre altri la ignorano e agiscono a modo loro. Ciò crea difficoltà agli sviluppatori che desiderano creare pagine Web universali. L'unico consiglio è di limitare l'uso delle proprietà width e height, perché il browser imposta automaticamente l'argomento auto, che fa sì che l'elemento si ridimensioni automaticamente.