Le Tutoriel de CSS box-sizing

View more Tutorials:

1- CSS box-sizing:content-box

CSS Box Modal est un conteneur (container), créé à partir de nombreux composants, notamment  content (contenu), paddings, margins, borders. Voici l'image d'illustration d'un  Box Model :

CSS {box-sizing:content-box}

CSS box-sizing contient les valeurs par défaut de  content-box, c'est-à-dire l'élément par défaut est une  "Context-Box".
Dans le cas où l'élément est un  "Content-Box"CSS width/height sera la largeur et la hauteur du rectangle contenant le contenu de l'élément, ce qui signifie que lorsqu'un élément est établi  padding ou  border (ou tous les deux) il rend l'élément plus grand.
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>
La taille actuelle d'un élément  "Content-Box" est calculé par le formule :
realWidth = contentWidth + cssBorderWidthLeft + cssBorderWidthRight + cssPaddingLeft + cssPaddingRight

realHeight = contentHeight + cssBorderWidthTop + cssBorderWidthBottom + cssPaddingTop + cssPaddingBottom
 
Dans lequel :
// box-sizing:content-box (Default):

// We have:

contentWidth = cssWidth
contentHeight = cssHeight

2- CSS box-sizing:border-box

Parfois, vous voulez établir une border, padding pour un élément et vous ne voulez pas augmenter la taille de l'élément. Ceci est possible si vous utilisez CSS box-sizing:border-box. Cet élément sera alors considéré comme une "Border-Box"
Si un élément est un  "Border-Box"CSS width/height sera  "largeur/ hauteur" du rectangle comprenant à la fois​​​​​​​ padding et  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 (!)

Remarque : La plupart des navigateurs ne supportent pas ​​​​​​​ CSS box-sizing:padding-box (ou ne le soutiennent plus).
Si un élément est établi  CSS box-sizing:padding-box il sera considéré comme une  "Padding-Box". Alors  CSS width/height sera la largeur et la hauteur du rectangulaire qui contient  padding, mais il ne comprend pas  borders.

View more Tutorials: