CSS百分比宽度减去固定宽度

Question

我有一个填充，我想减去基于程序的设计。打字区域有填充，但输入时间超过100％。

任何人都可以解释我的CSS有什么问题：

input[type='text'] {
    padding:5px;
    width:calc(100% - 10px);
}

<input type="text" name="username" id="username" value="Username" />

Answer 1

为什么不使用：

input[type='text'] {
    padding:5px;
    box-sizing:border-box;
    width:100%;
}

请参阅this fiddle和this article about box-sizing