devstory

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:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.