ボーダーボックスのパーセントパディング/余白

Question

私の理解では、box-sizing:content-boxを使用すると、要素のパディングと余白をパーセントで設定すると、実際のコンテンツ領域の幅のパーセントになります。そのため、埋め込みに関係なく、300ピクセル幅の画像の50％のマージンは150ピクセル幅の余白を作成し、実際のサイズは450ピクセル幅（+パディング）になります。

ここでbox-sizing:border-boxを使用すると、widthはcontent + padding + borderとして定義されます。もし私の要素のパディングを％を使ってborder-boxに設定すると、これは幅のこの異なる定義を参照することになり、したがってそれ自体を参照しますか？そうでない場合はコンテンツの幅のみを参照します。その場合、コンテンツの幅自体もパディングとボーダーの幅（コンテンツ幅=（ボーダーボックス幅） - ボーダーパディング）に依存します。したがって、パディングは、より小さなコンテンツを参照し、パディング自体を再び小さくする。私はこの権利を理解していますか？どちらの場合も、パディングが自分の身体から離れているようです。私は何が欠けていますか？ブラウザーは何を（コンテンツのみまたは実際の幅）に基づいてパーセンテージを計算するのですか？

ありがとうございます！

Answer 1

余白と罫線の実際のサイズがどのように計算されるかは、box-sizingに設定しても問題ありません。いずれにしても同じです。 heightとwidthで指定された全体のサイズでボーダーとパディングが（content-box）含まれていないか、または、彼らは（border-box）が含まれるように

何content-boxまたはborder-box行うには、要素の幅と高さを持つコントロールです。

また、罫線の幅をパーセンテージに設定することはできず、詰め物は内容ではなく要素の幅に基づいています。

#one { 
 
    box-sizing:content-box; /* default */ 
 
    width:100px; 
 
    height:100px; 
 
    padding:10%; /* padding % is a percentage of the element's width */ 
 
    border:1px solid red; 
 
    border:10% solid black; /* Borders can't be set to percentages */ 
 
    background:yellow; 
 
    float:left; 
 
} 
 

 
#two { 
 
    box-sizing:border-box; /* default */ 
 
    width:100px; 
 
    height:100px; 
 
    padding:10%; /* padding % is a percentage of the element's width */ 
 
    border:1px solid red; 
 
    border:10% solid black; /* Borders can't be set to percentages */ 
 
    background:blue; 
 
    float:left; 
 
}

<div id="one"></div> 
 
<div id="two"></div>