Perché le proprietà della larghezza e dell'altezza CSS non si adattano al riempimento?

Question

Quindi, prima un po 'di carne per impostare la scena:

HTML

<div id="container"> 
    <div id="inner">test</div> 
</div> 

CSS

#container { 
    width:300px; 
    height:150px; 
    background-color:#d7ebff; 
} 

#inner { 
    width:100%; 
    height:100%; 
    padding:5px; 
    background-color:#4c0015; 
    opacity:.3; 
} 

Questo produrrà qualcosa che assomiglia a questo in tutti i browser moderni:

Ora so che questo è il comportamento conforme agli standard (come sapevo prima, ma riconfermata nel this post, e so anche che se includo questo codice nella dichiarazione CSS interno:

box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box 

.. . Adotterò il modello "border-box" e otterrò il comportamento che mi sembra più intuitivo, ma mi sono appena trovato a cercare di giustificare logicamente il ragionamento dietro al perché questo è il modo in cui è e non sono stato in grado di farlo.

Sembra (sulla superficie delle cose) più logico per me che la scatola interna riempia sempre il contenitore esattamente al 100% della larghezza del contenitore, indipendentemente dal riempimento o dal bordo della scatola interna. Mi imbatto in questo problema tutto il tempo in cui sto cercando di impostare la larghezza di una textarea al 100% con un bordo o qualcosa di simile a un padding interno di 4px ... la textarea riempirà sempre il contenitore.

Quindi la mia domanda è ... qual è la logica dietro l'impostazione del comportamento predefinito per ignorare il bordo e il riempimento di un elemento quando si imposta la larghezza?

Answer 1

Il motivo CSS utilizza il box model come:

+--------------------- 
|  Margin 
| +------------------- 
| |  Border 
| | +----------------- 
| | | Padding 
| | | +--------------- 
| | | | Width x Height 

è perché i CSS è un documento styling lingua. Era (originariamente) progettato con documenti di ricerca e altri documenti formali in mente, non come un modo per creare una grafica carina. In quanto tale, il modello ruota attorno al contenuto , non al contenitore.

CSS non è un linguaggio di programmazione, è un linguaggio di stile. Non indica esplicitamente al documento come dovrebbe essere visualizzato, lo suggerisce alcune linee guida che il browser dovrebbe seguire. Tutti questi possono essere sovrascritti e modificati da un vero linguaggio di programmazione: JavaScript.

Tornando al contenuto-modello di idea, si consideri il seguente CSS:

p 
{ 
    background-color: #EEE; 
    border: 1px solid #CCC; 
    color: #000; 
    margin: 10px; 
    padding: 9px; 
    width: 400px; 
} 

height non è specificato, perché il contenutodefinisce l'altezza, può essere lungo, potrebbe essere breve, ma è sconosciuto e non importante. Il width è impostato su 400px perché è così che il contenuto (testo) deve essere largo.

Il padding è solo un mezzo per estendere il colore di sfondo in modo che il testo possa essere ben leggibile lontano dai bordi, proprio come si lascia uno spazio quando si scrive/stampa su un foglio di carta.

Il border è un mezzo per circondare alcuni contenuti per differenziarlo dagli altri sfondi o per fornire un bordo (vai figura) tra vari elementi.

Il margin indica al paragrafo di lasciare uno spazio tra i bordi e, con il collasso dei margini, ciascun gruppo rimarrà equidistante senza dover specificare un margine diverso per il primo o l'ultimo elemento.

Per mantenere fluidità, width default auto, che significa che la larghezza sarà il più ampio possibile:

1. senza schiacciando il contenuto irragionevolmente
2. senza l'imbottitura si estende oltre il suo contenitore

Ovviamente, nei casi limite, l'imbottitura si estenderà oltre il suo contenitore perché il contenuto potrebbe essere schiacciato. Tutto riguarda il contenuto.

Answer 2

Si potrebbe desiderare di rivedere quanto segue al W3C: http://www.w3.org/TR/CSS21/box.html

Il modello di dialogo è tale che l'altezza e la larghezza riguardano l'area del contenuto dell'elemento. L'imbottitura è al di fuori di quella zona ed è per questo che vedi la scatola interna che trabocca quella esterna.

Dopo il riempimento, il bordo, se presente. Quindi il margine si applica al di fuori del confine. Ciò significa che la larghezza effettiva degli elementi è definita come: Larghezza + Riempimento + Bordo + Margine.

In effetti, il css ha definito la casella interna con un'area di 300px per 150px più un 5px aggiuntivo di padding oltre a quello che produce una casella di 310px per 160px.

Personalmente, sono d'accordo che la larghezza dovrebbe includere il padding. Tuttavia, non è quello che dice la specifica.

Come nota a margine, la modalità di quirks include il padding (e il bordo) nella larghezza effettiva. Sfortunatamente, la modalità "Quirks" evita così tante altre cose che di solito è meglio gestire il modello spec3d di w3c piuttosto che provare a creare tutto il css necessario per aggiustare le altre cose "bizzarre".

Un altro sito (che è d'accordo con te e io) è qui: http://www.quirksmode.org/css/box.html

accennano che CSS3 include la dichiarazione box-sizing (come hai trovato) che dovrebbe dare un maggiore controllo su cui box modello da usare. Sembra che quasi tutti (IE8, Chrome, Firefox) supportano ciò che è buono.

Answer 3

Per rispondere alla tua domanda, penso che la logica sia che riguarda il contenuto; se specifichi le dimensioni, queste sono le dimensioni che il contenuto sta per ottenere.

Ma alla fine è solo una scelta che è stata fatta ed è quello con cui dobbiamo lavorare.

Answer 4

Guardate la seguente immagine:

Consideriamo ora cosa succede quando si impostare la larghezza e l'altezza dei valori al 100% - devono il padding e il bordo magicamente scompaiono da questo quadro?Come faresti come uno sviluppatore a gestirlo in modo ragionevole?

width and height is width and height, border and padding is something else - per me non è più logico di così.

D'altra parte

width and height is width and a height, but sometimes when you choose to set them to 100% they are also border and padding - ora che non avrebbe alcun senso per me.

Ma poi, una logica mans può essere un altro mans sciocchezze, quindi non so se questo vi aiuterà;)

Answer 5

Anche se questo potrebbe non essere stata l'intenzione originale del box model, un altro vantaggio è se vuoi qualcosa con un'immagine di sfondo sfalsata (ad esempio l'immagine è a sinistra oa destra del testo). Quindi è possibile specificare il riempimento in modo che sia la larghezza dell'immagine di sfondo in modo che il testo non si sovrapponga e specifichi comunque una larghezza per il testo stesso. Per esempio:

.imageDiv{ 
width:200px; 
background-image:url('someimage.png') /*this image is 50 px wide*/ 
background-repeat:no-repeat; 
padding-left:50px; 
} 

Ora qualsiasi testo entrato in un div con la classe imageDiv mostrerà l'immagine a sinistra del testo con qualsiasi sovrapposizione.