[分享]css中 这什么区别是什么

CSS的box-sizing和border-box的区别
在CSS中，有一个非常重要的属性叫做box-sizing，用于设置元素的盒模型类型。常见的盒模型类型有两种：content-box和border-box。这两种盒模型类型有何区别呢？让我们来一探究竟。
首先，我们先来了解一下盒模型。盒模型就是用来描述一个元素在页面上占用的空间大小和位置的模型。盒模型由外到内分别为：margin、border、padding、content。其中，margin是元素周围的空白区域，border是边框，padding是元素内容与边框之间的空白区域，content是元素的实际内容。
由于不同的浏览器对盒模型的解析不同，导致了在CSS中存在两种不同的盒模型类型：content-box和border-box。
content-box是W3C推荐的标准盒模型。在这种模型下，元素的宽度和高度仅包括内容的部分，并不包括border和padding。因此，在设置一个元素的宽度和高度时，需要将border和padding的宽度也考虑在内。
border-box是IE盒模型。在这种模型下，元素的宽度和高度包括内容、border和padding三个部分的宽度。因此，在设置一个元素的宽度和高度时，只需要考虑content的宽度即可，border和padding的宽度会自动加入宽度和高度计算中去。
为了更清晰地理解它们之间的差异，我们来看一下下面这个例子：

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 5px solid #000;
  box-sizing: content-box;
} 

上述代码意味着我们设置了一个200x200像素的盒子，并给它设置了20像素的padding和5像素的边框。如果我们使用content-box盒模型类型，那么这个盒子的实际宽度和高度应该是：200 + 2*20 + 2*5 = 250像素。这是因为盒子的宽度和高度并不包括padding和border的宽度。如果我们使用border-box盒模型类型，那么这个盒子的实际宽度和高度应该是：200像素。这是因为盒子的宽度和高度包括了padding和border的宽度。
在实际开发中，我们应该根据实际需求来选择不同的盒模型类型。如果不需要考虑padding和border的宽度，我们可以使用border-box盒模型类型，这样可以更方便地计算宽度和高度。如果需要考虑padding和border的宽度，我们可以使用content-box盒模型类型，这样可以更准确地控制元素的布局。