Ogni elemento in una pagina web genera una scatola rettangolare. Questo è spesso indicato come il modello box. Il corpo standard web, il W3C, definisce un modello di formattazione visuale. Questo articolo offre consigli sulla comprensione del box model CSS.

istruzione

1

Ogni elemento ha una casella intorno ad esso. Ogni scatola ha un area di contenuto e le zone imbottitura, di confine e di margine circostanti opzionali.

2 Padding e margini sono trasparenti, consentendo l'immagine di sfondo o sfondo per mostrare attraverso.

3 I valori di padding, bordo e margine possono essere definiti collettivamente per ogni proprietà, o individualmente per ogni immobile sul top box, a destra, in basso ea sinistra.

4 Le specifiche del W3C definire la larghezza scatola come "la somma dei margini sinistro e destro, bordo, padding, e la larghezza del contenuto." L'altezza scatola è definito come "la somma del margini superiore e inferiore, bordo, padding e l'altezza di contenuti."

Studiare questo esempio:

div {

width: 100px;

padding: 10px;

border: 5px;

margin: 10px;

}

5 Trova larghezza per l'esempio nel passaggio 4 aggiungendo tutto. (Margin-left) 10px + (border-sinistra) 5px + (padding-left) 10px + (tenore) 100px + (padding-right) 10px + (border-right) 5px + (margin-right) 10px = 150 px.

6 Utilizzare la stessa procedura per determinare l'altezza di un elemento.

Consigli e avvertenze

• Internet Explorer per Windows prima versione 6 non ha attuato correttamente il box model. Versione 6 implementerà il box model correttamente se la pagina ha il giusto DOCTYPE essere in modalità standard.
• Hacks e / o commenti condizionali che punta a fogli di stile speciali devono essere utilizzati per risolvere il IE5 e box model bug.