Propiedad de tamaño de caja CSS3

Question

Aug 30, 2012, 01:18 PM

Propiedad de tamaño de caja CSS3

No entiendo cómo debo usar la propiedad de tamaño de caja. Porque esto:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"> 
        div.container
        {
            width:10em;
            border:1em solid;
        }
        div.box
        {
            box-sizing:border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
            width:50%;
            border:1em solid red;
            float:left;
        }
        </style>
    </head>
    <body>

        <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        </div>

    </body>
</html>

es equivalente a esto:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"> 
        div.container
        {
            width:10em;
            border:1em solid;
        }
        div.box
        {
            width:3em;
            border:1em solid red;
            float:left;
        }
        </style>
    </head>
    <body>

        <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        </div>

    </body>
</html>

Entonces, ¿cuándo debo usar esa propiedad y exactamente eso? Usé el ejemplo de w3http://www.w3schools.com/cssref/css3_pr_box-sizing.asp