box-sizing 边框框不起作用

box-sizing 属性是一个 CSS 属性，它用于指定在计算元素的总宽度和高度时是否包括边框和填充。默认情况下，浏览器会将 box-sizing 属性设置为 content-box，即仅计算元素的内容区域的宽度和高度，不包括边框和填充。

然而，在某些情况下，我们可能希望在计算元素的尺寸时包括边框和填充。这时可以通过将 box-sizing 设置为 border-box 来实现。这意味着元素的总宽度和高度将包括边框和内填充，而不会影响内容的大小。

用法示例

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box;
}

在上述示例中，我们创建了一个类名为 .box 的元素，并在 CSS 中为其设置了宽度、高度、填充和边框。通过将 box-sizing 属性设置为 border-box，元素的宽度和高度将被计算为包括边框和填充在内的总尺寸。

注意事项

• 在使用 box-sizing 属性时，需要确保将元素的标准框模型设置为 width: auto，这样元素的总宽度可以根据容器的大小进行调整。
• box-sizing 属性的取值只能是 content-box 或 border-box，没有其他选项。如果不指定该属性，则使用默认值 content-box。

浏览器兼容性

box-sizing 属性在现代浏览器中得到了很好的支持。但是在 IE8 及之前的版本中不支持它，因此在使用时需要考虑到兼容性问题。

更多关于 box-sizing 属性的详细用法和更多示例可以参考 MDN 文档。