box-sizing属性值content-box和border-box的区别

一、两者区别

在介绍两者的具体区别之前，先来熟悉一下盒子模型，如下图所示，Padding位于Content和Border之间。

区别如下：

box-sizing: content-box; 表示content大小不变，以content为基准向外“添加”padding，撑大了border;

box-sizing: border-box; 表示border大小不变，以border为基准向内“添加”padding，挤压了content;