javascript - HTML 输入和按钮宽度不同

Question

我现在有一个奇怪的问题，我的 input 和 button 标签的宽度相同 (width: 341.5px;从代码中的 $(window).width()/4) 计算，但它们在视线范围内的宽度不相近。这就是我的意思:

(深色主题来 self 的 GTK 主题)。

为什么会这样？

var screenWidth = $(window).width();
var screenHeight = $(window).height();
$(".userName").css("width", screenWidth / 4);
$(".passWord").css("width", screenWidth / 4);
$(".submit").css("width", screenWidth / 4);

body {
  margin: 0;
  padding: 16px;
}

.userName {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #FF8A80;
  color: #000000;
  padding: 16px;
}

.passWord {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #FF8A80;
  color: #000000;
  padding: 16px;
}

.submit {
  background-color: transparent;
  border: 2px solid #FF8A80;
  color: #000000;
  padding: 16px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.submit:hover {
  background-color: #FF8A80;
  border: 2px solid transparent;
  color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="userName" class="userName" title="This area is for your unique username" placeholder="Your username here" required autofocus />
<br />
<input type="password" name="passWord" class="passWord" title="This area is for your unique username" placeholder="Your password here" required />
<br />
<button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right">Submit</button>
<br />

Answer 1

我复制粘贴了你的代码，只添加了 1 block css:

* {
    box-sizing: border-box;
}

/* OR */

input, button {
    box-sizing: border-box;
}

运行下面的代码片段。

var screenWidth = $(window).width();
var screenHeight = $(window).height();
$(".userName").css("width", screenWidth / 4);
$(".passWord").css("width", screenWidth / 4);
$(".submit").css("width", screenWidth / 4);

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 16px;
}

.userName {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #FF8A80;
    color: #000000;
    padding: 16px;
}

.passWord {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #FF8A80;
    color: #000000;
    padding: 16px;
}

.submit {
    background-color: transparent;
    border: 2px solid #FF8A80;
    color: #000000;
    padding: 16px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.submit:hover {
    background-color: #FF8A80;
    border: 2px solid transparent;
    color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="userName" class="userName" title="This area is for your unique username" placeholder="Your username here" required autofocus  />
<br />
<input type="password" name="passWord" class="passWord" title="This area is for your unique username" placeholder="Your password here" required />
<br />
<button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right" >Submit</button>
<br />

所有元素的 box-sizing 属性的默认值为 content-box。

使用此值，计算元素的宽度和高度与其填充和边框无关。因此，width: 10px 和 padding: 5px 的元素在显示时实际上是 15px 宽度。

通过使它的box-sizing属性border-box，它包括padding和border到计算中。因此 width: 10px 和 padding: 5px 实际上只有在显示时才为 10px 宽度(虽然它里面的内容变成了 0px宽，因为两边的填充各占用 5px)。

了解更多 here和 here .

注意: margin 值不会影响任何一种情况。