Dimensionamento box CSS3: margin-box; Perchè no?

Perché non l'abbiamo box-sizing: margin-box;? Di solito quando inseriamo i box-sizing: border-box;nostri fogli di stile intendiamo davvero il primo.

Esempio:

Diciamo che ho un layout di pagina a 2 colonne. Entrambe le colonne hanno una larghezza del 50%, ma sembrano un po 'brutte perché non c'è grondaia (spazio nel mezzo); Di seguito è riportato il CSS:

.col2 {
    width: 50%;
    float: left;
}

Per applicare una grondaia potresti pensare che potremmo semplicemente impostare un margine destro sulla prima delle 2 colonne; qualcosa come questo:

.col2:first-child {
    margin-right: 24px;
}

Ma ciò farebbe avvolgere la seconda colonna in una nuova riga, poiché è vero quanto segue:

50% + 50% + 24px > 100%

box-sizing: margin-box;risolverebbe questo problema includendo il margine nella larghezza calcolata dell'elemento. Lo troverei molto utile se non più utile di box-sizing: border-box;.

Non potresti usare width: calc(50% - 24px);per i tuoi compagni? Quindi impostare i margini.

Penso che potremmo avere un box-sizing: margin-box. Il modello di casella CSS mostra esattamente quali sono le posizioni dei margini dei frame.

Esistono problemi minori, ad esempio le caselle dei margini possono sovrapporsi, ma non sono difficili da risolvere.

Penso che la situazione sia la stessa, come possiamo vedere con le combinazioni overflow-x& overflow-y, con i div assoluti positionied nelle celle della tabella, con la combinazione di min | max-width | height con il ridimensionamento della casella, e così via.

Ci sono funzionalità, funzionalità davvero semplici, che gli sviluppatori del browser semplicemente non sviluppano.

IMHO, box-sizing: margin-boxerano una funzionalità molto utile. Un'altra caratteristica utile era la box-sizing: padding-box, esiste almeno nello standard, ma non è stata implementata in nessuno dei principali browser. Neanche nel nuovissimo chrome!

Nota: il commento di @Oriol: Firefox ha implementato il dimensionamento del box: padding-box. Ma altri no, ed è stato rimosso dalle specifiche. Firefox lo rimuoverà nella versione 50. Triste.

Il ragazzo in alto sta chiedendo di aggiungere margine alla larghezza complessiva, inclusi imbottitura e bordo. Il fatto è che il margine viene applicato fuori dagli schemi e l'imbottitura e il bordo non lo sono, durante l'utilizzo border-box.

Ho cercato di realizzare l' border-marginidea. Quello che ho scoperto è che se si utilizza il margine è possibile aggiungere una classe .lastall'ultimo elemento (con margine, quindi applicare un margine pari a zero o utilizzare :last-child/:last-of-type). Oppure aggiungi tutti i margini uguali (in modo simile alla versione di imbottitura sopra).

Vedi esempi qui: http://codepen.io/mofeenster/pen/Anidc

border-boxcalcola la larghezza dell'elemento + la sua imbottitura + il suo bordo come larghezza totale. Quindi se hai 2 divsecondi di larghezza del 50%, saranno adiacenti. Se aggiungi 8pxloro delle imbottiture, avrai una grondaia di 16px. Combinalo con un elemento avvolgente - che ha anche un'imbottitura 8px- avrai una griglia ben disposta con uguali grondaie tutto intorno.

Vedi questo esempio qui: http://codepen.io/mofeenster/pen/vGgje

Quest'ultimo è il mio metodo preferito.

Sono sicuro che tutto ciò è ovvio, ma lo scrivo comunque perché ... beh, ho bisogno dell'esercizio. Il seguente risultato non sarebbe altrettanto efficace di box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingviene utilizzato per controllare da quale punto l'imbottitura e il bordo vengono valutati in base alla dimensione complessiva dell'elemento. Quindi, sebbene non sia kosher includere pxmargini con una %larghezza (come sempre accade), è più semplice calcolare quale dovrebbe essere la percentuale relativa perché non è necessario incorporare imbottitura e bordi alla larghezza definita.

Questo perché l'attributo di ridimensionamento della casella si riferisce alla dimensione di un elemento dopo aver calcolato i valori specifici della dimensione specificati (riempimento, bordi). "box-sizing: border-box" imposta l'altezza / larghezza di un elemento e prende in considerazione l'imbottitura e la larghezza del bordo. L'ambito del margine di un elemento è maggiore dell'elemento stesso, nel senso che modifica il flusso della pagina e dei suoi elementi circostanti, alterando quindi direttamente il modo in cui l'elemento si adatta all'interno del suo genitore rispetto ai suoi elementi fratelli. In definitiva un valore di attributo "margin-box" causerebbe gravi problemi ed è essenzialmente lo stesso di impostare direttamente l'altezza / larghezza degli elementi.

Su Codrops ci sono un paio di buoni articoli sull'argomento dell'effetto dei margini e le file sono costrette a traboccare. Suggeriscono di utilizzare l'unità rem o em con un normalizzatore css che imposta la dimensione del carattere al 100% per tutti i browser, quindi quando si impostano larghezze e margini è facile tenere traccia dell'effetto sulla larghezza della riga semplicemente annotando nei commenti per la larghezza totale. Una conversione da 16 px a 1 em è il modo per calcolare il totale delle finestre di destinazione con.

Funzionando in questo modo almeno per lo stadio di sviluppo e quindi se si desidera modelli "reattivi" è possibile convertire le larghezze in% comprese le larghezze dei margini.

L'altro e spesso più semplice modo in cui suggeriscono di gestire le grondaie è usare lo pseudo dopo e l' content: '';uno su ciascuna delle tue colonne che trovo funzioni davvero bene. Se imposti una classe div che è l'ultima colonna definita come end, puoi scegliere come target quella classe per non avere lo pseudo dopo o per averne una più ampia; che si adatta meglio al tuo layout.

Il vantaggio aggiuntivo dell'utilizzo di questo metodo pseudo-elemento è che ti dà anche un bersaglio per le ombre che può dare un effetto più 3d e una maggiore profondità all'immagine piatta sul monitor dei lettori. Al momento sto sperimentando questo effetto aumentando gli effetti utilizzati sui pulsanti, "modificando" i gradienti e l'indice z.

Le dimensioni degli elementi a livello di blocco e non sostituiti nel flusso normale devono soddisfare

margine-sinistra + bordo-sinistra-larghezza + imbottitura-sinistra + larghezza + imbottitura-destra + bordo-destra-larghezza + margine-destra = larghezza del blocco contenitore

Se sottoposti a vincoli eccessivi, i browser devono regolare il margine sinistro o destro. Penso che ciò significhi che la larghezza del margine deve essere uguale alla larghezza del blocco contenitore (cioè 100%).

Per il tuo caso, bordi trasparenti con box-sizing: border-boxpossono funzionare in modo molto simile ai margini .

Forse imposta il bordo su 0% di opacità usando RGBA e usa il bordo come margine.

C'è una situazione interessante quando si usa il ridimensionamento della scatola all'interno del contenuto del corpo

nessun contenuto nessuna casella di confine non fornisce alcun valore sul margine sinistro-destro% di conteggio di questi algoritmi di conteggio con due riquadri

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

Le versioni di Firefox precedenti alla 57 supportavano anche il valore del riquadro di riempimento per il ridimensionamento del riquadro, sebbene questo valore sia stato rimosso dalle specifiche e dalle versioni successive del browser.

Quindi margin-box anche non pianificato ...