ボックスモデルと
パーセント指定を
極めるボックスモデルの基本を振り返る

content-boxではpaddingを設定した場合、追加という形で余白が作られます。そのため要素全体の幅は400 + 400 x 20% = 480pxとなり、親要素の横幅400pxからはみ出してしまいます。

上記の問題を防ぐためにborder-boxがあります。border-boxの場合は、横幅は増えず、内部を仕切る形で余白が設定されます。結果として横幅が320pxと20%短くなります。

実践的なレイアウトでは親要素の中に子要素を複数並べてそれぞれの横幅を％で指定することが多いと思われます。
簡単に示すと下記の様なコードになります。

<div id="item_a">
	<div class="side">item / side</div>
	<div class="core">item / core</div>
	<div class="side">item / side</div>
</div>

ここでうっかりしやすいのが親がborder-boxだと子要素の真ん中「item / core」の横幅を100％に指定しそうなことです。
実際に指定するとわかりますがここは80％でないといけません。
下はwidth:100%のサンプルです。

よく考えると解るんですがpaddingなどを使ってないのでbox-sizingの値は関係ないんですよね。

ボックスモデルとパーセント指定のサンプル：https://labo.studio-happyvalley.com/percent/padding/

基本、vwはブラウザ横幅のパーセントに相当します。しかし、必ずしも100％ == 100vwとなるわけではありません。
例えば、もっとも違いが顕著なのがブラウザ横幅いっぱいのwidth:100％の要素です。
下記のような違いがります。スクロールバーの横幅16pxの差がでます。

横幅を100％で指定した場合、親の横幅全体（スクロールバーの横幅をマイナスした）732px。横幅を100vwで指定した場合、ブラウザの横幅全体749px。

このコンテンツのサンプルコードは赤の引き出し線をcanvas要素で作ってます。

HTMLは

<canvas id="canvas3" width="50" height="100"></canvas>

JSは

	var canvas = document.getElementById('canvas');
	var canvasL = document.getElementById('canvasLeft');
	if (canvas.getContext) {
		var ctx = canvas.getContext('2d');
		ctx.strokeStyle = 'rgb(217,0,54)';
		ctx.fillStyle = '#d90036';
		ctx.beginPath();
		ctx.arc(4, 50, 4, 0, 2 * Math.PI);
		ctx.moveTo(4, 50);
		ctx.lineTo(100, 50);
		ctx.stroke();
		ctx.fill();
		var ctxl = canvasL.getContext('2d');
		ctxl.strokeStyle = 'rgb(217,0,54)';
		ctxl.fillStyle = '#d90036';
		ctxl.beginPath();
		ctxl.arc(46, 50, 4, 0, 2 * Math.PI);
		ctxl.moveTo(46, 50);
		ctxl.lineTo(0, 50);
		ctxl.stroke();
		ctxl.fill();
	}

と直線一本引くだけでも9行も必要になります。黒丸を設定するだけでも同じく9行。
さらにcanvas要素は使用する場所へそれぞれ設定する必要があります。
そのためこれをそれぞれ繰り返す必要があります。面倒ですねえ・・・。
こういう場合はjavascriptの配列の出番です。
幸い、設定値は相対的に指定できるので配列から取り出した要素には定数で設定できるので簡単です。

function drawLines() {
	var canvases = document.querySelectorAll('canvas');
	canvases.forEach(function(item, num){
		if (item.getContext) {	
			let arcXPoint= 4;
			let lineXPoint= 100;
			if( item.id.includes('L') ){arcXPoint= 46;lineXPoint= 0; }
			const ctx = item.getContext('2d');
			ctx.strokeStyle = 'rgb(217,0,54)';
			ctx.fillStyle = '#d90036';
			ctx.beginPath();
			ctx.arc(arcXPoint, 50, 4, 0, 2 * Math.PI);
			ctx.moveTo(arcXPoint, 50);
			ctx.lineTo(lineXPoint, 50);
			ctx.stroke();
			ctx.fill();
		}
	});
}

export { drawLines };

/* モジュール化してます */

ボックスモデルとパーセント指定のサンプル：https://labo.studio-happyvalley.com/percent/padding/