Un'occhiata al dimensionamento delle scatole CSS3
Non molto tempo fa, quando creiamo un scatola in una pagina web, diciamo con a div, noi specifichiamo 100px sia per la larghezza che per l'altezza, seguite da imbottitura per 10px e confini di circa 10px anche.
div width: 100px; altezza: 100 px; imbottitura: 10px; border: 10px solid #eaeaea;
I browser espanderanno la dimensione della scatola a 140px, dove questa quantità 140px della larghezza / altezza totale è composta dall'aggiunta del imbottitura e il frontiere come segue; 100px [width / height] + (2 x 10px [padding]) + (2 x 10px [bordo]).
Tuttavia, a volte questo risultato non è quello che ci aspettiamo che sia. A volte, abbiamo bisogno che la scatola sia sempre 100px indipendentemente dal padding o dai bordi aggiunti.
Per superare un problema ricorrente durante la creazione di layout di pagine Web, possiamo utilizzare il CSS3 box-sizing proprietà per controllare come Modello di box CSS dovrebbe funzionare nei browser.
Utilizzando il dimensionamento della scatola
Il box-sizing la proprietà ha due opzioni di valore, prima la contenuti-box; che è il valore predefinito, quando si utilizza questo valore il modello di box si comporterà come descritto sopra.
E il secondo è border-box, dove verrà calcolata la dimensione della scatola sottraendo la dimensione del contenuto specificato con l'imbottitura e i bordi aggiunti.
div width: 100px; altezza: 100 px; imbottitura: 10px; border: 10px solid #eaeaea; dimensionamento della scatola: border-box; -moz-box-dimensionamento: border-box; / * Firefox 1-3 * / -webkit-box-dimensionamento: border-box; / * Safari * /
Ad esempio, quando abbiamo una scatola come quella sopra descritta (100 px quadrati con 10 pixel per il padding e i bordi), la dimensione del contenuto diminuirà fino a 60px, e la dimensione totale della scatola rimane 100px, dove l'equazione della sottrazione può essere descritta come segue; 100px [width / height] - ((2 x 10px [padding]) + (2 x 10px [bordo])).
- dimostrazione
- Scarica fonte
Supporto del browser
Il box-sizing la proprietà è supportato in tutti i browser; Firefox 3.6+, Safari 3, Opera 8.5+ e Internet Explorer 8 e versioni successive.
Quindi, se sai che la maggior parte dei tuoi visitatori non utilizzerà le versioni di Internet Explorer sotto gli 8, puoi usare questa raccomandazione utile (grazie a Paul Irish).
* ridimensionamento della scatola: border-box; -moz-box-dimensionamento: border-box; / * Firefox 1-3 * / -webkit-box-dimensionamento: border-box; / * Safari * /
Lo snippet sopra riportato applicherà il box-sizing proprietà a tutti gli elementi sulla tua pagina web.
Esempio
In questa sezione, ti mostreremo un esempio di vita reale su come possiamo farne uso box-sizing proprietà. Creeremo una semplice navigazione, basata sul markup HTML sottostante, con cinque menu di collegamento al suo interno.
Quindi, aggiungeremo alcuni stili decorativi; come, imposta la navigazione correggere la larghezza per 500px e la larghezza del link per 100 px ciascuna, quindi allinea l'elemento della lista e dai sfondi diversi per ciascun menu di collegamento, in modo che tu possa vedere la differenza tra loro.
nav width: 500px; margine: 50px auto 0; altezza: 50 px; nav ul padding: 0; margine: 0; nav li float: left; nav a display: inline-block; larghezza: 100 px; altezza: 100%; background-color: #ccc; colore: # 555; decorazione del testo: nessuna; font-family: Arial, sans-serif; font-size: 12pt; altezza della linea: 300%; allineamento del testo: centro; nav a display: inline-block; larghezza: 100 px; altezza: 100%; colore: # 555; decorazione del testo: nessuna; font-family: Arial, sans-serif; nav li: nth-child (1) a background-color: # E9E9E9; border-left: 0; nav li: nth-child (2) a background-color: # E4E4E4; nav li: nth-child (3) a background-color: #DFDFDF; nav li: nth-child (4) a background-color: # D9D9D9; nav li: nth-child (5) a background-color: # D4D4D4; border-right: 0;
A questo punto, la nostra navigazione sembra normale.
Tuttavia, il problema verrà quando aggiungiamo i bordi sinistro o destro al menu dei collegamenti.
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3;
Il menu scorrerà verso il basso, poiché la larghezza del link non è più 100px. È adesso 102px, causando la larghezza totale della navigazione 10px più a lungo quindi abbiamo specificato sopra (500px).
Per superare questo problema, dobbiamo applicare il box-sizing proprietà, come segue:
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3; dimensionamento della scatola: border-box; -moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box;
- dimostrazione
- Scarica fonte
Ulteriori letture
Infine, se sei un tipo avventuroso e vuoi approfondire questo argomento, abbiamo creato per te alcuni riferimenti selezionati:
- Comprensione del modello di box CSS - Tech Republic
- Bug a dimensione di casella in Firefox - BugZilla
- Dimensionamento scatola FTW - Paul Irish
