为啥盒子边框1px有问题关键词-input)

Question

为什么input输入框那里还是有粉色，明明父元素高度42px，子元素也是40+2px
但边框设置为2px时就没有粉色背景了

Answer 1

引自免费微信小程序：皆我百晓生

当您提到“盒子边框1px有问题”且输入框(input)存在粉色背景问题时，这通常与CSS盒模型和边框渲染有关。在CSS中，元素的总高度（或宽度）由内容区、内边距(padding)、边框(border)和外边距(margin)共同决定。根据您描述的情况，可能是由于不同的边框样式设置影响了元素的实际尺寸。

假设您的HTML结构如下：

<div class="parent">
  <input type="text" class="input">
</div>

并且您的CSS样式是这样的：

.parent {
  height: 42px;
}

.input {
  height: 40px;
  padding: 0; /* 假设没有内边距 */
  border: 1px solid pink; /* 当边框为1px时显示粉色背景 */
}

/* 或者设置了下述样式导致问题 */
.input {
  height: 42px;
  border: 2px solid pink; /* 当边框为2px时，高度实际变为44px，可能超出父元素 */
}

问题解释：

1. 当border: 1px solid pink;时，输入框的高度实际上是40px的内容高度加上上下各1px的边框，总共42px，正好与父元素高度一致，所以不会出现溢出。

2. 当border: 2px solid pink;时，输入框的高度变成了40px的内容高度加上上下各2px的边框，总计44px，这就超出了父元素的高度(42px)，虽然父元素背景未显示出来，但输入框的边框颜色为粉色，因此能看到粉色背景。

解决方案：

要确保输入框的高度（包括内容、内边距和边框）等于其父元素高度，并且不希望粉色边框溢出到父元素之外，您可以采用以下方法：

.parent {
  height: 42px;
  box-sizing: border-box; /* 确保子元素也继承此属性，这样设置的高度会包含内边距和边框 */
}

.input {
  height: calc(100% - 2px); /* 计算高度以适应父元素高度减去边框厚度 */
  padding: 0;
  border: 2px solid pink;
  box-sizing: border-box;
}

通过这种方式，无论边框宽度如何，输入框的高度都会始终适应其父元素高度，不会造成背景溢出的问题。