152

なぜ私たちは持っていないのbox-sizing: margin-box;ですか？通常box-sizing: border-box;、スタイル シートを挿入するときは、前者を意味します。


例：

2 列のページ レイアウトがあるとします。両方の列の幅は 50% ですが、ガター (中央のギャップ) がないため見栄えが悪くなります。以下は CSS です。

.col2 {
    width: 50%;
    float: left;
}


ガターを適用するには、2 つの列の最初の列に右マージンを設定するだけでよいと考えるかもしれません。このようなもの：

.col2:first-child {
    margin-right: 24px;
}

ただし、次のことが当てはまるため、これにより 2 番目の列が新しい行に折り返されます。

50% + 50% + 24px > 100%

box-sizing: margin-box;要素の計算された幅にマージンを含めることで、この問題を解決します。よりも便利ではないにしても、これは非常にbox-sizing: border-box;便利だと思います。

4

10 に答える 10

56

コルに使えませんwidth: calc(50% - 24px);か？次にマージンを設定します。

于 2013-11-20T15:00:43.027 に答える
17

を持てると思いますbox-sizing: margin-box。CSSボックスモデルは、フレームのマージンの位置を正確に示しています。

マイナーな問題があります - たとえば、マージン ボックスが重なる可能性がありますが、解決するのは難しくありません。

overflow-x&overflow-yの組み合わせ、テーブル セル内の絶対配置 div、ボックス サイズと min|max-width|height の組み合わせなどでわかるように、状況は同じだと思います。

ブラウザー開発者が開発していない、本当に単純な機能があります。

私見box-sizing: margin-boxは、非常に便利な機能でした。もう 1 つの便利な機能は でbox-sizing: padding-box、少なくとも標準には存在しますが、主要なブラウザには実装されていませんでした。最新のクロムでさえありません！

注: @Oriol のコメント: Firefox は box-sizing: padding-box を実装しました。しかし、他のものはそうではなく、仕様から削除されました. Firefox はバージョン 50 で削除します。悲しい。

于 2013-11-25T10:30:16.243 に答える
6

一番上の人は、パディングとボーダーを含め、全体の幅にマージンを追加することについて尋ねています. 問題は、マージンはボックスの外側に適用され、パディングとボーダーは適用されないということborder-boxです.

border-margin私はその考えを達成しようとしました。私が見つけたのは、マージンを使用する場合.last、最後の項目に のクラスを追加できることです (マージンを使用して、ゼロのマージンを適用するか、 を使用します:last-child/:last-of-type)。または、全体に均等なマージンを追加します (上記のパディング バージョンと同様)。

ここで例を参照してください: http://codepen.io/mofeenster/pen/Anidc

border-box要素の幅 + そのパディング + その境界線を合計幅として計算します。したがって、div幅が 50% の が 2 つある場合、それらは隣接します。8pxそれらにパディングを追加すると、ガターが16px. それをラッピング要素 (パディングも含む) と組み合わせると、8px全体に均等なガターを備えたきれいにレイアウトされたグリッドが得られます。

ここでこの例を参照してください: http://codepen.io/mofeenster/pen/vGgje

後者は私のお気に入りの方法です。

于 2013-11-23T12:36:59.530 に答える
5

これはすべて明らかだと思いますが、とにかく入力します...まあ、演習が必要だからです。次の結果は ほど効率的ではないでしょうかbox-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingパディングとボーダーが要素の全体のサイズに評価されるポイントを制御するために使用されます。pxしたがって、幅のあるマージンを含めることはコーシャではありません%が (通常は常にそうです)、定義された幅にパディングと境界線を組み込む必要がないため、相対的な割合を計算する方が簡単です。

于 2013-09-26T14:17:10.947 に答える
4

This is because the box-sizing attribute refers to the size of an element after computing the given dimension-specific values (padding, borders). "box-sizing: border-box" sets the height/width of an element and takes into consideration the padding as well as the border width. The scope of an element's margin is greater than the element itself, meaning it modifies the flow of the page and its surrounding elements, therefore directly altering the way the element fits within its parent relative to its sibling elements. Ultimately a "margin-box" attribute value would cause major problems and is essentially the same as setting the elements height/width directly.

于 2013-11-14T18:03:19.297 に答える
2

通常の流れにおけるブロック レベルの非置換要素の次元は、次の条件を満たす必要があります。

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = 包含ブロックの幅

制約が過剰な場合、ブラウザーは左マージンまたは右マージンのいずれかを調整する必要があります。これは、マージン ボックスの幅が含まれるブロックの幅 (つまり 100%) と等しくなければならないことを意味すると思います。

あなたの場合、透明な境界線はbox-sizing: border-boxmargins のように機能します。

于 2013-10-10T02:24:00.997 に答える
1

Codropsには、余白と行のオーバーフローの影響に関する優れた記事がいくつかあります。彼らは、すべてのブラウザーでフォント サイズを 100% に設定するノーマライザー css で rem または em ユニットを使用することを提案しています。全幅。16px から 1 em への変換は、ターゲット ビューポートの合計幅を計算する方法です。

少なくとも開発段階ではそのように作業し、「レスポンシブ」テンプレートが必要な場合は、マージン幅を含めて幅を % に変換できます。

content: '';ガターを処理するために彼らが提案する他のより簡単な方法は、私が見つけた各列の疑似 after と on を使用することです。end などの定義された最後の列である div クラスを設定すると、そのクラスをターゲットにして、疑似 after を持たないようにするか、より広いものにすることができます。あなたのレイアウトに最も適したもの。

この疑似要素メソッドを使用することの追加のボーナスは、リーダー モニター上のフラット イメージにさらに 3D 効果と深みを与えることができるシャドウのターゲットも提供することです。現在、ボタンで使用されている効果を拡大し、グラデーションと z-index を「微調整」することで、この効果を試しています。

于 2013-10-02T21:13:17.190 に答える