ce n'è uno nel codice del documento, quindi occupa l'intera larghezza libera della finestra del browser e la larghezza del blocco sarà del 100%. Vale un tag
all'interno di un altro, poiché la larghezza del tag interno inizia a essere calcolata rispetto al suo genitore, ad es. contenitore esterno.
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
Larghezza
Lorem ipsum dolor sit amet...
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
Larghezza
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Il risultato dell'esempio è mostrato in Fig. 2.
![](https://i0.wp.com/htmlbook.ru/files/images/content/092_2.png)
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
Altezza
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Il risultato di questo esempio è mostrato in Fig. 3.
![](https://i1.wp.com/htmlbook.ru/files/images/content/092_3.png)
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).
![](https://i0.wp.com/htmlbook.ru/files/images/content/092_4.png)
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
Telaio
Lorem ipsum dolor sit amet...
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.