Kann mir jemand erklären denn unterschied zwischen box-sizing: border-box und box-sizing: content-box erklären. (Box Model)
Ich habe mal gesucht und gelesen aber noch nicht ganz verstanden.
Danke.
Kann mir jemand erklären denn unterschied zwischen box-sizing: border-box und box-sizing: content-box erklären. (Box Model)
Ich habe mal gesucht und gelesen aber noch nicht ganz verstanden.
Danke.
Hallo, das Prinzip dahinter ist ganz einfach:
content-box ist das alte Boxmodell,
border-box ist das neue Boxmodell
beim alten Boxmodell ergibt sich die Breite/Höhe eines Elements wie folgt:
Beim neuen Boxmodell ergibt sich die Breite/Höhe tatsächlich nur aus width/height.
Beispiele:
div#content-box {
box-sizing: content-box;
width: 200px;
margin: 5px;
padding: 5px;
border: 2px solid black;
}
div#border-box {
box-sizing: border-box;
width: 200px;
margin: 5px;
padding: 5px;
border: 2px solid black;
}
Alles anzeigen
Der erste Container besitzt eine Breite von 214px, da sich die Abstände und der Rahmen zur Breite hinzu addieren, der 2. Container besitzt eine Breite von genau 200px, die Abstände und der Rahmen werden in die Breite eingerechnet.
kannst du mir erklären warum du einzelne befehle nicht einfach mal bei Google eingibst: www.gidf.de
@Basiii: Du bist echt sehr gutmütig
Hat er doch:
Ich habe mal gesucht und gelesen aber noch nicht ganz verstanden.
Aber es kommt, gerade am Anfang, oft vor das man sich nach dem Lesen eines Textes über ein Verfahren trotzdem noch unsicher ist und lieber persönlich nachfragt, diese Sicherheit wollen wir im Forum gewährleisten denn sonst könnten wir es auch einfach abschalten.
Das Forum ist Teil eines Seminares, dies bedeutet vor Allem das wir eine Anlaufstelle für jeden Lernfortschritt sind, wir möchten so gut es geht helfen und nicht einfach Links zu anderen Beiträgen bezüglich des Themas bereitstellen, darum möchte ich auch alle Benutzer bitten Kommentare wie "Frag doch Google" für sich zu behalten, das bringt weder euch noch andere weiter.
Hallo
Danke @Basiii
Mal schauen ob ich es verstanden habe.
Kann ich z.b. auch die Grosse von der Seite so festlegen. Ich meine z.b. 1280x768 mit border-box ohne margin und padding.
Ich habe mal probiert so:
div#border-box {
box-sizing: border-box;
width: 1280px; (oder: auto?)
height: 768px;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
Grundsätzlich kann ich auch margin und padding weg lassen?
Wenn content-box veraltet ist, wird somit nur noch border-box benutzt oder wird content-box wegen IE noch benutzt?
Danke.
In deinem Beispiel wäre div#border-box genau 1280px breit und 768px hoch, der Platz den du effektiv nutzen kannst wäre dann das was übrig bleibt wenn man von den 1280px/768px die Werte für margin, padding und border abzieht.
Wenn du Google Chrome nutzt gibt es die Konsole die mit F12 aurufbar ist, diese zeigt dir eine Skizze für dein Element an:
div#border-box {
box-sizing: border-box;
width: 1280px;
height: 768px;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
html-seminar.de/woltlab/attachment/502/
Content-box ist nicht unbedingt veraltet sondern war eben früher der Standard, ich persönlich zum Beispiel bin es gewohnt die Werte noch selbst abzuziehen und dementsprechend anzupassen, daher würde ich eher nicht auf border-box zurückgreifen.
Danke für die Antwort.
Ich werde border-box benutzen.
Aber Margin bleibt weiterhin "Außen" oder ?!
Margin ist nicht mit eingerechnet, schau dir noch ein mal genau das Bild an
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 1290px
5px + 1px + 5px + 1268px + 5px + 1px + 5px = 1290px
Außerdem gibt es noch mehr Werte:
ZitatBeim CSS Advanced Layout Module geht man von folgenden Werten aus:
- content-box: Altes/Normales Box Model (Standardwert)
- padding-box: Neues Box Model, Innenabstände verbreitern ein Element nicht mehr
- border-box: Neues Box Model, Rahmen verbreitern ein Element nicht mehr
- margin-box: Neues Box Model, zusätzliche Außenabstände verkleinern ein Element, so dass seine Breite mit Margin zusammen nicht die vorgegebene Breite überaschreitet
Leider ist das nicht ganz so einfach, grundsätzlich gilt: Hier gibt es nur ja oder nein, in der border-box sind auch die Abstände inbegriffen, die margin-box und die padding-box sind Sonderfälle und es ist nicht ganz so einfach nachzuvollziehen wie genau das funktioniert. Theoretisch sollte es tatsächlich so sein wie du es denkst, praktisch sieht das allerdings anders aus. Stichwort CSS Advanced Layout Module.
5px + 1px + 5px + 1268px + 5px + 1px + 5px = 1290px
Okay Danke
-Wieder was gelernt
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.