在同一个元素上使用高度和边框是一种好的实践吗？

Question

一些同学告诉我，同时使用border、height和width属性会搞乱盒子的尺寸。我花了很多时间进行研究（以确定这是否正确），但是我没有找到任何答案。

同时使用这些属性（border、height和width）是一个好的做法吗？这会给我带来麻烦吗？

.infobox {
    background-color: white;
    border: 1px solid black;
    float: right;
    height: 125px;
    width: 150px;
}

- D.Freeman

Answer 1

使用边框是完全可以的！这会稍微复杂一些，因为边框会增加总宽度/高度，但是可以通过使用box-sizing: border-box来解决这个问题，这将使填充和边框包含在宽度/高度内。我建议您熟悉一下盒子模型：

(图片来自W3Schools)

- M. Salman Khan

Answer 2

没问题，可以在一个元素上同时使用height和border属性。你的同学们提到了CSS盒子模型，构建CSS时需要注意这一点。

默认的盒子模型是content-box，其中：

宽度和高度属性只包括内容，不包括内边距、边框或外边距。

box-sizing (https://developer.mozilla.org/en/docs/Web/CSS/box-sizing)

这意味着在您的示例中，.infobox的最终高度为127（高度+边框），宽度为152（宽度+边框）。

另一个盒子模型是border-box，其中：

宽度和高度属性包括填充和边框，但不包括外边距。

box-sizing (https://developer.mozilla.org/en/docs/Web/CSS/box-sizing)

使用这个盒模型会导致.infobox的最终高度为125，宽度为150，因为边框被考虑在内。

请查看以下代码片段，演示了两种盒子尺寸选项：

.infobox {
  border: 1px solid black;
  float: left;
  height: 125px;
  width: 150px;
}
.contentBox {
  background-color: red;
}
.borderBox {
  background-color: blue;
  box-sizing: border-box;
}

<div class="contentBox infobox">content-box</div>
<div class="borderBox infobox">border-box</div>

- Hidden Hobbes