我一直在四处寻找，但找不到适用于我自己问题的解决方案。
我正在开发一个移动网站，需要输入框为屏幕的 100% 宽度。但我有padding-left: 16px 和margin: 5px 使框超出屏幕，所以我必须向右滚动才能看到框的末尾。如何使框 100% 减去填充和边距？
【问题讨论】：
box-sizing: border-box，您可以设法解决填充问题，但不能解决边距问题。
width: auto; left: 0px; right: 0px; max-width: 100%; 所有这些其他答案都有缺点/问题。
你可以使用calc，现代浏览器也支持，IE9+也支持。
div {
margin: 10px;
width: calc(100% - 20px);
height: 10px;
background: teal;
}<div></div>【讨论】：
块级元素自然填充其父级，但是如果您专门设置宽度，您会覆盖此行为，允许将边距和边框添加到指定宽度。您在 body 上指定 100% 的宽度，因此如果有一个元素渲染到它的右内边缘，它就有机会水平溢出文档。
示例：http://jsfiddle.net/trex005/6earf674/
解决这个问题的简单方法是停止声明主体的宽度。如果出于某种原因需要这样做，您可以将边距设置为 0； 同样的原理也适用于输入，但稍微复杂一些。输入（文本/密码）和文本区域，即使设置为显示为块，也将分别从大小和列中获取它们的宽度。这可以通过在 CSS 中指定宽度来覆盖，但是它们也有用户代理指定的边框和边距，因此您再次遇到溢出问题。要修复此溢出，您需要将输入的显示设置为阻止，并且它是 box-sizing:border-box。边框框会计算边框和内边距作为宽度的一部分。
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
一旦你这样做，你会注意到元素之间有额外的间距。这是因为 display:block 强制换行，而您添加的 <br> 标签是多余的。删除那些，你就开始做生意了！
【讨论】：
calc，因为我不想重复填充代码。注意display 也可以是flex。
Looe width:100%; 然后简单地使用尽可能多的填充：
#login_box {
padding:10px;
margin:50px;
}
隔离效果：
演示 http://jsbin.com/ozazat/1/edit
大量填充，大量边距，完全没有问题。
【讨论】：
我在 100% 高度时遇到了这个问题，最终让我震惊的是，答案是在 100% 高度/宽度（即父级）以上的元素上使用填充。
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
总之，parent的padding和child的margin效果一样！
【讨论】：
另一种解决方案是定位 INPUT 的 absolute 并添加左/右 props：
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
您需要调整边距等，因为它们将超出相对布局流程。您也可以轻松添加填充，因为您没有设置固定宽度。
所有浏览器都广泛支持这种技术。
【讨论】：
您可以将文本框的宽度调整为 100% 到 95%。现在看起来不错
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
【讨论】：