In CSS, use the width and height properties to specify the width and height of an element. Using the box-sizing property, you can specify whether the width and height values specified by the width property and the height property respectively include the height and width of the element's inner padding area and border.
The property values that can be specified by the box-sizing property are: content-box (not included), border-box (included).
So why use the box-sizing property? The purpose is to control the total width of the element. If this property is not used, the content-box property used by default in the style only specifies the width of the content, but does not specify the total width of the element. Using border-box can make page layout more convenient in some cases.