だから私はこの概念を理解しようとしています。以下の画像では、サブ要素の合計幅が 250px で、両方とも 10 px のパディングで囲まれていることがわかります。したがって、パーセンテージを取得するには、ターゲット/コンテキストを実行する必要があります。私が理解していない部分は、親の合計幅 (590px) に基づいて計算する合計幅 (250px) のパーセンテージを取得することですが、パディング (10px) のパーセンテージを計算するために、親の内側の幅（570px）..それはなぜですか？より具体的には、570px div のパディングは 250px ブロックが占めるスペースを妨げないように見えるため、570px から 250px のパーセンテージも計算されないのはなぜですか。ここで何が欠けていますか？
その図は少しわかりにくく、それを単独で使用して質問に答えるのは難しいことがわかりました。私がモックアップしたこの例が役立つことを願っています (通常はライブ コードを見る方が簡単です) - 必ずソースを読んでサイズを調べてください。 Chrome 開発者ツール ([メトリクス] セクションで、[要素] タブを開いた状態で個々<div>の s にカーソルを合わせるだけ) またはブラウザの同等の要素を使用して、個々の要素。
図では、パーセンテージを使用していますが、四捨五入することで混乱を招いています。レスポンシブ デザインを行うときは、パーセンテージを切り上げたり切り下げたりしないでください。正確な数値を使用してください (または、図を描画している場合は、ターゲットとコンテキストの計算を表示します)。ブラウザーは (いくつかの古い例外を除いて) 常に複数の小数点以下桁数に対応できます。(理想的には、計算を行うSASSのような CSS プリプロセッサを使用することをお勧めします)。
また、2 つの列を左右にフロートさせるだけで単純化しました。図の中央の 3 番目の 20px 列がわかりにくくなっていると思います。最初にすべての左右のパディングを等しくしてから、より複雑なものについて心配してください。実際にその中に何かが必要な場合にのみ、3 番目の div を使用してください。
box-modelにも注意する必要があります- サブ要素の幅は 250px ですが、幅が 250px のボックスがあり、CSS を使用していずれかのサイズに 10px のパディングを追加すると、表示幅は幅 (または高さ) であるため 270px になります。 、および任意の境界線とパディング。これは非常に混乱を招く可能性があります - 実際に必要なのは、幅が 250 ピクセルで、その中に左右に 10 ピクセルのパディングがあるものです - 多くの場合、この動作をオフにする方が簡単です - 私の例のように - box-sizing: border-box;(Mozilla プレフィックスが必要です)。
柔軟なマージンまたはパディングを設定するときは、コンテキストに常に親 (要素のコンテナー) を使用します。計算で 590 ではなく 570 を使用したことに気付くかもしれません。これは、570 ピクセルが列 1 で使用する必要がある有効な幅であるためです。 、他には何もありません。長方形には、スペースを空けるための左右のマージンもあります。列のテキストと同じ高さにしたい場合は、それらを削除するか、たとえば最初の四角形の右のみのマージンに置き換えることができます。.rectangle
これがお役に立てば幸いです…</p>