CSS盒模型与box-sizing详解

对于刚入门的前端小伙伴，对box-sizing、css盒子模型可能会有疑惑，今天我带领大家彻底搞清楚这两个东东。

要想搞清楚box-sizing和CSS盒子模型，首先要理解这两者各有什么作用。

box-sizing：允许您以特定方式定义匹配某个区域的特定元素（官方）。

官方定义中有两个关键词‘特定方式’、‘特定元素’，什么特定方式呢？其实就是box-sizing对应的两个属性值，border-box和content-box。什么特定元素呢？其实就是页面中的html标签，一个html标签就对应一个css盒子模型，对css盒子模型有所了解的小伙伴应该都知道盒模型从外到内有margin、border、padding、content组成。如果我们要计算一个盒模型的尺寸，这时就要先对box-sizing进行设置才行。

1）如果box-sizing值为border-box，告诉浏览器使用的盒模型是IE盒模型，此时盒模型的尺寸计算方式是：

width=border-left-width+border-right-width+padding-left+padding-right+content-width;

height=border-top-width+border-bottom-width+padding-top+padding-bottom+content-height

2）如果box-sizing值为content-box（默认值），告诉浏览器使用的盒模型是标准W3C盒模型，此时盒模型的尺寸计算方式是：

width=content-width;

height=content-height;

 

我们在工作中应该选择哪种盒子模型呢？

引用MDN一段话：

Note: 对于新的web站点，你可能希望首先将box-sizing设置为border-box，如下所示：

* { box-sizing: border-box; }

这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如： 你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。