盒子大小的边框和边框在未知高度的物体上宽度

Question

我有两个输入框，我想在选中时突出显示。

我应用了以下全局边框样式：

/* box sizing */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

据我所知，在对任何元素应用边框时，其宽度或高度现在应保持不变。

将以下样式应用于输入框时：

input{
    padding: 0.5em;
    border: none;
}

input:focus{
    outline: none;
    border: 2px solid $dark_blue_highlight;
}

......大小实际上会因选择而改变。

在我找到解决方案之前，我最终试图解决这个问题：明确定义元素的高度。不是宽度，只有高度有效。我完全不知所措。

我真的更愿意在没有定义尺寸的情况下这样做，为什么这不是一个选项？难道这不适用于未知大小的元素吗？

有人可以向我解释这里发生了什么吗？

Answer 1

box-sizing属性适用于已知维度的元素。如果没有定义的宽度/高度，它将无法按预期工作。在那些时候你不希望改变已知尺寸的元素。如果您尝试设置高度＆amp;您输入的宽度，您将无法实现任何变化。