box-sizing 属性用于控制盒模型的计算方式,可以影响元素的尺寸计算。默认值为 content-box,表示元素的尺寸只包括内容部分,不包括边框(border)和内边距(padding)。
若将 box-sizing 设置为 border-box,则元素的尺寸将包括内容、内边距和边框,而不是只包括内容。这样可以使元素的尺寸更加直观和可控。
box-sizing: content-box;
/* 默认值,元素的尺寸只包括内容部分,不包括边框和内边距 */
box-sizing: border-box;
/* 元素的尺寸包括内容、内边距和边框 */
box-sizing 的使用可以使布局更加灵活和方便,减少计算错误。在使用 padding 和 border 的时候可以更加直观地控制元素的尺寸,避免出现不必要的布局问题。