codestory

Die Anleitung zu CSS box-sizing

  1. CSS box-sizing:content-box
  2. CSS box-sizing:border-box
  3. CSS box-sizing:padding-box (!)

1. CSS box-sizing:content-box

CSS Box Modal ist ein Behälter (container), der aus vielen Komponenten erstellt wird, einschließend content (die Inhalt), paddings, margins, borders. Unten ist das die Illustration vom Box Model:
CSS {box-sizing:content-box}
CSS box-sizing hat eine Default-Wert content-box . Das heißt, das Default-Element ist ein "Context-Box".
Falls das Element ein "Content-Box" ist , ist CSS width/height die Breite und Höhe vom Rechteck , der die Inhalt des Element enthält. d.h wenn ein Element padding oder border (oder die beiden) eingestellt wird, macht es das Element größer.
box-model-example.html
<div style="border: 1px solid gray;width:200px;height:100px;">
     border: 1px solid gray; <br/>
     width:200px; <br/>
     height:100px;
</div>
<div style="margin: 20px;padding:30px; border: 10px solid gray;width:200px;height:100px;">
    margin: 20px; <br />
    padding:30px;   <br/>
    border: 10px solid gray;  <br/>
    width:200px;  <br/>
    height:100px;
</div>
Die aktuelle Größe eines Element vom Typ "Content-Box" wird nach der Regelung gerechnet:
realWidth = contentWidth + cssBorderWidthLeft + cssBorderWidthRight + cssPaddingLeft + cssPaddingRight

realHeight = contentHeight + cssBorderWidthTop + cssBorderWidthBottom + cssPaddingTop + cssPaddingBottom
Davon:
// box-sizing:content-box (Default):
// We have:
contentWidth = cssWidth
contentHeight = cssHeight

2. CSS box-sizing:border-box

Manchmal möchten Sie border, padding für das Element einstellen und das Element größer nicht machen. Das ist ganz machtbar wenn Sie CSS box-sizing:border-box verwenden. Dann wird das Element als "Border-Box" gesehen.
Wenn ein Element "Border-Box" ist, ist CSS width/height"die Breite/die Höhe" vom Rechteck, einschließend padding und borders.
box-sizing-border-box.html
<!DOCTYPE html>
<html>

<head>
    <title>CSS box-sizing</title>
    <meta charset="UTF-8"/>
    <style>
         .my-box  {
            box-sizing:border-box;
            width:250px;
            height:120px;
            margin: 20px;
            padding:30px;
            border: 10px solid gray;
         }
    </style>
</head>
<body>
    <h3>CSS {box-sizing:border-box;}</h3>
    <div class = "my-box">
        box-sizing:border-box; <br/>
        width:250px;  <br/>
        height:120px;  <br/>
        margin: 20px; <br/>
        padding:30px;   <br/>
        border: 10px solid gray;
    </div>
</body>
</html>

3. CSS box-sizing:padding-box (!)

Achtung: Die meisten Browser unterstützen CSS box-sizing:padding-box nicht (oder unterstützen nicht mehr).
Ein Element, das CSS box-sizing:padding-box nicht eingestellt wird, wird ein "Padding-Box" gesehen. Dann ist CSS width/height die Breite und Höhe vom Rechteck, der padding enthältet, aber nicht borders.

Anleitungen CSS

Show More

Neueste Artikel

Show More