Box Model ..border-box,box-sizing Frage

  • 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:


    Code
    1. border-left + padding-left + width + padding-right + border-right


    Beim neuen Boxmodell ergibt sich die Breite/Höhe tatsächlich nur aus width/height.


    Beispiele:



    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.


    Kleine Referenz

  • 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. :rolleyes:


    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:



    CSS
    1. div#border-box {
    2. box-sizing: border-box;
    3. width: 1280px; (oder: auto?)
    4. height: 768px;
    5. margin: 5px;
    6. padding: 5px;
    7. border: 1px solid black;
    8. }


    HTML
    1. <div id="border-box">Textextxtext</div>


    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:


    CSS
    1. div#border-box {
    2. box-sizing: border-box;
    3. width: 1280px;
    4. height: 768px;
    5. margin: 5px;
    6. padding: 5px;
    7. border: 1px solid black;
    8. }


    seminar.jpg


    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.

  • Margin ist nicht mit eingerechnet, schau dir noch ein mal genau das Bild an :)


    Code
    1. margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 1290px
    2. 5px + 1px + 5px + 1268px + 5px + 1px + 5px = 1290px


    Außerdem gibt es noch mehr Werte:


    Zitat

    Beim 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.