box-sizingプロパティの詳細と実践

知識課題

知識課題１

box-sizingプロパティの2つの値（content-box、border-box）について、以下の点を説明してください。

• それぞれの値における要素の実際の表示サイズの計算方法
• 値の違いによって生じる実際の表示への影響
• それぞれの特徴と適切な使用場面

知識課題2

box-sizing: border-boxが一般的に推奨される理由を考察してください。

実践課題

以下の仕様に基づき、異なるbox-sizing値を持つ2つのボックスを作成し、結果を比較してください。

/* 共通の設定 */
width: 300px;
padding: 20px;
border: 2px solid #000;

実践要件

• 一方のボックスにbox-sizing: content-boxを、もう一方にbox-sizing: border-boxを適用してください。
• 両者の最終的な表示サイズを確認し、結果を記述してください。