box-sizing

width値は300 pxに等しいが、結果的に表示される画面はそうではない.
padding、widthを学習した後に理解しなければならない特性.
最初の横スクリーンは300 pxで、
2つ目のケースを確認すると横は300 pxではありません.
なぜなら、両側に10 pxの枠線が増加し、50 pxのpaddingが増加するごとに横方向に420 pxになるからだ.
10+10+50+50+300 = 420
これらの特性を把握して符号化することは問題ないはずであるが、
ご迷惑をおかけしました.
設計案では、素子の水平値しか分からない.
設計を表示して符号化するだけであれば、paddingを頭の中で計算し、最終幅がどのくらいになった後にcssを適用する必要があります.
目に見える幅は、
開発者が符号化する値は、符号化ロジックと一致する必要があります.
多くの開発者は、この点が不便であることに気づき、新しいCSSプロファイルを作成しました.

.new {
  box-sizing: border-box;
}

図に示すようにwidth値が与えられる.
そして中に水を入れると、考えやすいです.
そのため、ほとんどのページではbox size propertyが採用されています.
また、すべてのタグにこのプロパティを適用する必要がありますが、各タグを毎日適用するには、コードが長くなります.
次の「*」セレクタを使用して、すべてのタグに適用できます.

* {
  box-sizing: border-box;
}

後で授業をするときは特にbox-size propertyを入れません.
しかし、これは個人プロジェクトや仕事で適用しなければならないプロジェクトです.