html - box-sizing border-box 和未知高度和宽度的对象的边框

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 属性适用于尺寸已知的元素。如果没有定义的宽度/高度，它就不会像您期望的那样工作。在那些你不希望已知尺寸的元素发生变化的时候，它就在那里。如果您尝试为输入设置高度和宽度，您将发现没有任何变化。