Warum passen sich die CSS-Eigenschaften Breite und Höhe nicht an die Auffüllung an?

Question

Zunächst also ein wenig Fleisch, um den Rahmen abzustecken:

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;
}

Dies führt zu einem Ergebnis, das in allen modernen Browsern so aussieht:

Jetzt weiß ich, dass dies das standardkonforme Verhalten ist (was ich schon vorher wusste, aber in diese Stelle und ich weiß auch, dass, wenn ich diesen Code in die innere CSS-Deklaration einfüge:

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

...es wird das "border-box"-Modell übernehmen und das Verhalten erhalten, das mir intuitiver erscheint, aber ich habe mich dabei ertappt, wie ich versucht habe, logisch zu begründen, warum dies so ist, wie es ist, und es ist mir nicht gelungen.

Es erscheint mir (oberflächlich betrachtet) logischer, dass der innere Kasten den Container immer zu genau 100 % der Breite des Containers ausfüllt, unabhängig von der Auffüllung oder dem Rand des inneren Kastens. Ich stoße ständig auf dieses Problem, wenn ich versuche, die Breite eines Textfeldes auf 100 % festzulegen, das einen Rahmen oder so etwas wie eine 4px Innenauffüllung hat... das Textfeld wird den Container immer überfüllen.

Meine Frage lautet also: Welche Logik steckt dahinter, wenn man das Standardverhalten so einstellt, dass der Rahmen und das Padding eines Elements bei der Einstellung seiner Breite ignoriert werden?

Answer 1

Der Grund, warum CSS das Box-Modell verwendet, ist:

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

Denn CSS ist ein Dokumentengestaltung Sprache. Sie wurde (ursprünglich) mit Blick auf Forschungsarbeiten und andere formale Dokumente entwickelt, nicht als Möglichkeit zur Erstellung hübscher Grafiken. Als solches dreht sich das Modell um die Inhalt und nicht der Behälter.

CSS ist keine Programmiersprache, sondern eine Sprache für die Gestaltung. Sie sagt dem Dokument nicht ausdrücklich, wie es dargestellt werden soll, sondern schlägt vor einige Richtlinien, die der Browser befolgen sollte. Alle diese Richtlinien können durch eine aktuelle Programmiersprache überschrieben und geändert werden: JavaScript.

Um auf die Idee des Inhaltsmodells zurückzukommen, betrachten wir das folgende CSS:

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

height nicht angegeben ist, weil die Inhalt definiert die Höhe, sie kann lang oder kurz sein, aber sie ist unbekannt und unwichtig. Die width ist auf 400px eingestellt, denn so breit ist die Inhalt (Text) sollte sein.

El padding ist nur ein Mittel, um die Hintergrundfarbe so zu erweitern, dass der Text von den Rändern her gut lesbar ist, so wie man beim Schreiben/Drucken auf einem Blatt Papier Platz lässt.

El border ist ein Mittel, um einen Inhalt zu umgeben, um ihn von anderen Hintergründen zu unterscheiden, oder um einen Rahmen (stell dir vor) zwischen verschiedenen Elementen zu schaffen.

El margin sagt dem Absatz, dass er zwischen den Rändern etwas Platz lassen soll, und mit margin-collapsing bleibt jede Gruppe gleichmäßig beabstandet, ohne dass für das erste oder letzte Element ein anderer Rand angegeben werden muss.

Die Flüssigkeit aufrechtzuerhalten, width wird standardmäßig auf auto Das bedeutet, dass die Breite so groß wie möglich sein wird:

1. ohne den Inhalt unangemessen zu quetschen
2. ohne dass die Polsterung über den Behälter hinausragt

In Randfällen reicht die Polsterung natürlich über den Container hinaus, weil der Inhalt gequetscht werden könnte. Es geht nur um den Inhalt.

Answer 2

Sie sollten sich die folgenden Informationen bei w3c ansehen: http://www.w3.org/TR/CSS21/box.html

Das Box-Modell ist so konzipiert, dass sich Höhe und Breite auf den Inhaltsbereich des Elements beziehen. Die Auffüllung liegt außerhalb dieses Bereichs, weshalb die innere Box über die äußere hinausragt.

Nach dem Auffüllen kommt der Rand, falls vorhanden. Dann kommt Margin außerhalb des Rahmens. Das bedeutet, dass die tatsächliche Breite des Elements wie folgt definiert ist: Breite + Auffüllung + Umrandung + Marge.

In der Tat, die CSS, die Sie haben, definiert die innere Box zu einem 300px von 150px Inhaltsbereich plus eine zusätzliche 5px der Polsterung darüber hinaus, die eine Box, die 310px von 160px ist ergibt haben.

Ich persönlich bin der Meinung, dass die Breite die Polsterung einschließen sollte. Allerdings ist das nicht das, was die Spezifikation sagt.

Als Randbemerkung, Quirks-Modus enthält die Auffüllung (und Grenze) in der tatsächlichen Breite. Leider vermasselt der Quirks-Modus so viele andere Dinge, dass es in der Regel besser ist, sich mit dem von der W3C spezifizierten Modell zu begnügen, als zu versuchen, all das CSS zu erstellen, das notwendig ist, um die anderen "schrulligen" Dinge zu beheben.

Eine andere Seite (die mit Ihnen und mir übereinstimmt) finden Sie hier: http://www.quirksmode.org/css/box.html

Sie erwähnen, dass CSS3 die Box-Sizing-Deklaration enthält (wie Sie gefunden haben), die Ihnen mehr Kontrolle darüber geben soll, welches Box-Modell zu verwenden ist. Es sieht aus wie fast jeder (IE8, Chrome, Firefox) unterstützt, dass die gut ist.

Answer 3

Um Ihre Frage zu beantworten: Ich denke, die Logik besteht darin, dass sich alles um den Inhalt dreht; wenn Sie Dimensionen angeben, sind dies die Dimensionen, die der Inhalt erhalten wird.

Aber letzten Endes ist es einfach eine Entscheidung, die getroffen wurde, und damit müssen wir arbeiten.

Answer 4

Sehen Sie sich das folgende Bild an:

Überlegen Sie nun, was passiert, wenn Sie die Werte Breite und Höhe auf 100 % setzen - sollten die Füllung und der Rahmen auf magische Weise aus diesem Bild verschwinden? Wie würden Sie als Entwickler das jemals vernünftig handhaben?

width and height is width and height, border and padding is something else - Für mich ist das einfach nur logisch.

Andererseits

width and height is width and a height, but sometimes when you choose to set them to 100% they are also border and padding - Das würde für mich keinen Sinn ergeben.

Aber was für den einen Logik ist, kann für den anderen Unsinn sein, also weiß ich nicht, ob dir das hilft ;)

Answer 5

Auch wenn dies vielleicht nicht die ursprüngliche Absicht des CSS-Box-Modells war, besteht ein weiterer Vorteil darin, dass Sie etwas mit einem versetzten Hintergrundbild haben möchten (z. B. wenn das Bild links oder rechts vom Text steht). Dann können Sie die Breite des Hintergrundbildes als Padding angeben, damit der Text es nicht überlappt, und trotzdem eine Breite für den Text selbst angeben. Zum Beispiel:

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

Jetzt kann jeder Text, der in ein div mit der Klasse imageDiv zeigt das Bild links neben dem Text an, wenn es sich überlappt.