CSS中的宽度
属性通常是用于设置HTML元素的宽度大小。但是，当元素存在边框时，这个宽度
属性如何计算呢？
在CSS中，边框可以用border
属性来设置。通常border
属性由border-width、border-style和border-color三个
属性组成。其中，border-width是我们设置边框宽度的
属性。比如：
```
.myDiv {
width: 300px;
border: 2px solid black;
}
```
这里我们给`.myDiv`这个容器设置了
一个宽度为300px的宽度，并且设置了2px宽的黑色边框。
那么，`.myDiv`这个容器最终的宽度到底是多少呢？
在CSS的
Box模型中，宽度有两种计算方式：
内容宽度和外部宽度。
在这两种计算方式中，我们都需要考虑到border的影响。
当我们使用
内容宽度计算时，元素的宽度只算包含
内容的宽度。也就是说，元素本身的宽度不
包括边框、内边距和外边距。因此，如果我们设置了
一个宽度为300px，同时还有2px的边框，那么元素的最终宽度就是302px。
代码如下：
```
.myDiv {
width: 300px;
border: 2px solid black;
Box-sizing: content-
Box;
}
```
我们
在这里使用`
Box-sizing: content-
Box`来设置元素计算宽度时只算
内容宽度。
当我们使用外部宽度计算时，元素的宽度
包括了边框、内边距和外边距。也就是说，元素的宽度等于元素本身的宽度，
加上左右内边距的宽度，再
加上左右边框的宽度，再
加上左右外边距的宽度。
代码如下：
```
.myDiv {
width: 300px;
border: 2px solid black;
Box-sizing: border-
Box;
}
```
我们
在这里使用`
Box-sizing: border-
Box`来设置元素计算宽度时
包括边框宽度。
综上所述，我们可以得出结论：CSS宽度
属性可以算上边框，也可以不算。如果我们想要算上边框，可以使用`
Box-sizing: border-
Box`
属性。如果我们想要不算边框，可以使用`
Box-sizing: content-
Box`
属性。
