0

box-sizing プロパティの使用方法がわかりません。これのため：

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

これと同等です：

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

では、いつそのプロパティを使用する必要がありますか? w3 http://www.w3schools.com/cssref/css3_pr_box-sizing.aspの例を使用しました

4

5 に答える 5

4

box-sizing: border-boxボックスのマージン、境界線、およびパディングに基づいて正確なコンテンツ幅を指定できない場合に最も便利です。これらの値が何であるかが事前にわからない (そして制御できない) からです。

最初の例では、ボックス内のパディングの量やボーダーの太さがわからなかった場合、ボーダーボックス モデルを使用width: 50%することで、ボックスが常に 50% の幅を占めるように設定するだけで済みます。ボーダーとパディングに関係なく、そのコンテナーの。2 番目の例でwidth: 50%は、コンテンツの幅を設定した場合。ボーダーとパディングが追加され、実際にはコンテナーの幅の 50% を超えて拡張されます。

于 2012-08-30T11:22:53.727 に答える
3

ボックスサイズのCSSプロパティは、要素の幅と高さの計算に使用されるデフォルトのCSSボックスモデルを変更するために使用されます。このプロパティを使用して、CSSボックスモデルの仕様を正しくサポートしていないブラウザの動作をエミュレートすることができます。

注：学習にhttp://www.w3schools.com/を使用しないでください。詳細については、w3fools.comを参照してください。

于 2012-08-30T11:24:47.173 に答える
3

最初の例では、幅に境界線を50% 加えた値に設定していますが、プロパティが存在するため、box-sizing:border-box;幅全体に内部の境界線が含まれる50ため、ボックスは%境界線で幅が広くなります (必要に応じて、オプションでパディングも行います)。

これは 2 番目の例 — なし — と同等でbox-sizing:border-box;、合計幅1em + 3em + 1em = 5emは50%10em

于 2012-08-30T11:23:23.537 に答える
0

実際、div 要素で垂直方向と水平方向にパディングを使用すると、幅と高さの合計にパディングが追加されます。

like our div width is 100px and we give 5px padding from left and right side so div will calculate total of 100px + 5px + 5px = 120.

したがって、box-sizingここでプロパティを使用すると、パディングの余分な幅が計算されないため、幅を調整する必要はありません。

デモを見る： - http://tinkerbin.com/JtOC6ZJr

于 2012-08-30T11:49:00.777 に答える
-1

フレキシブル ボックス モデルを使用する際の 1 つの注意点は、このモジュールはまだドラフトであり、クロス ブラウザーのサポートであり、実装にはまだパッチがあることです。件名に関する良い投稿を見つけることができますhttp://webdevhub.co.uk/css3-flexible-box-model/

于 2012-09-08T10:24:23.627 に答える