-1

1 つは 60%、もう 1 つは 40% の 2 つの列があります。どちらも 20px のパディングが必要です。box-sizing プロパティを使用せずにこれを計算する最良の方法は何ですか? % または ems でそれを行いますか?

ここで box-sizing プロパティを使用するのは良い方法ですか?

4

2 に答える 2

0

元の質問に答えるには、何らかの理由で 20 ピクセルにする必要がない限り、パディングとマージンにパーセンテージを使用し、幅から差し引いてください。上下のパディングとマージンには ems を使用します。これが IRL の目的です。

.myclass_1 {
     width: 56%;
     margin: 1em 1%;
     padding: .5em 1%;
     display: inline-block;
}
.myclass_2 {
     width: 38%;
     margin: 1em auto;
     padding: .5em 1%;
     display: inline-block;
}

border-box が解決するために開発された問題は、境界線が幅のパーセンテージをとらないため、ピクセル単位の境界線を流動的なレイアウトに配置することが不可能になることです。多くの計算を行う必要がないため、パディングにはより便利ですが、少なくとも機能します。一方、境界では、近似する以外に解決策はありません。

境界線の幅に対応するために私が行っていること、および古いブラウザーのフォールバックとして試みたいと思われることは、ボックスを含むボックスに最小幅を設定してから、境界線の幅を考慮して幅を 0.5% 削ることです。次に、デザインを壊さずに最小サイズのウィンドウを満たすまで、画面でそれを試してみてください。

言うまでもなく、これはパディングが 20px である必要があるが流動的な表示が必要な場合にも機能します。これは、新しいボックス サイズをサポートしていないブラウザーのグレースフル デグラデーションです。

ところで、ボーダーがない場合は、「box-sizing: padding-box」スタイルがありますが、border-box よりも利点があるかどうかはわかりません。私は calc() についてあなたと一緒です -- サポートされていてもまだバグが多すぎます。

于 2013-11-05T21:19:27.713 に答える