box-sizing常用的属性有哪些？分别有什么作用？

Posted 2020-10-28 小安快跑

box-sizing: content-box|border-box|inherit;

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

即content-box:width:content;

   border-box:width:content+padding+border;