css3 边框不算宽度

在CSS3中，边框不再算作盒模型的宽度，这为前端开发者设计网页提供了更多的自由和灵活性。

在之前的CSS版本中，盒模型是由内容区、内边距、边框和外边距构成。而边框的宽度在计算盒模型的总宽度时也会被算上。这就意味着如果我们需要让一个元素的宽度为200px，同时又需要它有1px的边框，我们就需要将它的实际宽度设为202px。

.Box {
   width: 200px;
   border: 1px solid black;
}

然而在CSS3中，我们可以通过Box-sizing属性来改变盒模型的计算方式。当我们将Box-sizing设为border-Box时，盒模型的总宽度就会包含边框的宽度，内边距和内容区所占据的空间。这就意味着如果我们需要一个宽度为200px且带有1px边框的元素，我们只需要使用如下的代码：

.Box {
   width: 200px;
   border: 1px solid black;
   Box-sizing: border-Box;
}

这一特性让我们可以更轻松地设计网页，而不必担心边框所占据的空间导致元素溢出或者无法对齐。另外，由于Box-sizing是CSS3的新属性，它并不兼容IE7及以下版本的浏览器。因此，在使用这一特性时，我们需要考虑浏览器的兼容性问题。