2

境界線を使用すると、要素の外側に適用されます。幅 100px の div を作成し、全体よりも 10px の境界線を追加すると、全体が 120px になります。そのため、幅によるこの余分な不要な幅がフロートおよび流動レイアウトで問題を引き起こすため、レイアウトが良くありません。

ここに画像の説明を入力

この問題を解決するには 10px の境界線で 100px の div を作成したい場合は、80px の div と 10px の境界線よりも div を作成するので、合計幅は 100 になりますが、境界線または div のサイズを変更したいだけなので、必要ありません。両方を変更

div 100 px を作成して 10px の境界線を適用し、全体の幅を 100px にする方法はありますか?

4

2 に答える 2

3

がある。要素で使用できbox-sizing: border-box、幅 (および高さ) は IE が quirksmode で行った方法で計算されます。

非常に便利な場合もありますが、通常のボックス モデルがどのように機能するかを学び、最初に操作に慣れることをお勧めします。

Fwiw 私はすべてのbox-sizing: border-box要素をデフォルトとして使用してサイトを構築しましたが、実際にはお勧めしません。部分的には私が通常のボックスモデルに本当に慣れているためですが、ほとんどの場合、一部のブラウザーにはまだバグがあるためです (FF とパーセンテージを台無しにしたことを覚えています)。box-sizing

編集：IE <8では機能しないことに注意してください。
Edit2: 詳細はこちら: http://paulirish.com/2012/box-sizing-border-box-ftw/

于 2013-02-06T10:52:59.833 に答える
1

これは、2 つの div を互いに配置することにより、CSS2 / IE5,5/6 互換ソリューションで古典的にこの方法で解決されます。

<div class="size">
    <div class="border">
        Give me some border ;)
    </div>
</div>

CSS では、size -div を使用してサイズを設定し、border -div を使用して境界線を設定します。

.size {width:200px; height:200px;}
.border {border:10px solid blue;}

したがって、標準のボックスモデルしか知らない場合でも、これを解決できます。

ここに画像の説明を入力

このオンライン デモについては、http://jsfiddle.net/6K2vS/を参照してください。

一部の非常に古いブラウザーでは、これを機能させるために、外側の要素にゼロ幅の境界線を設定する必要さえある場合があります。下位互換性のあるソリューションを探しているかどうかに注意してください。

于 2013-02-06T11:28:58.303 に答える