Właściwość zmiany rozmiaru CSS3

Question

Aug 30, 2012, 01:18 PM

Właściwość zmiany rozmiaru CSS3

Nie rozumiem, jak powinienem korzystać z właściwości rozmiaru pudełka. Ponieważ to:

<!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>

jest równoważny z tym:

<!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>

Więc kiedy powinienem użyć tej właściwości i dokładnie to zrobić? Użyłem przykładu z w3http://www.w3schools.com/cssref/css3_pr_box-sizing.asp