在同一个元素上使用高度和边框是一种好习惯吗？

Question

我的一些同学告诉我，使用border，height和width会混淆一个盒子的尺寸。

我花了很多时间对此进行研究（看看这是否属实）但我找不到任何答案。

同时使用这些属性（border，height和width）是一种好习惯吗？ 这会给我带来麻烦吗？

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

Answer 1

使用边框是完全可以的！ 它确实使事情变得复杂，因为边框增加了总的wodth / height，但这可以通过使用box-sizing: border-box来修复，这使得填充和边框包含在宽度/高度中。我建议您熟悉一下盒子模型：

（图片来自W3Schools）

Answer 2

是的，在元素上同时使用height和border属性是完全正确的。你的同学正在参考CSS盒子模型的工作原理，这是你在构建CSS时需要注意的事情。

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

  

测量宽度和高度属性仅包括内容，但不包括填充，边框或边距。

大小调整（https://developer.mozilla.org/en/docs/Web/CSS/box-sizing）

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

替代方框模型为border-box，其中：

  

width和height属性包括填充和边框，但不包括边距。

大小调整（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>