添加<!DOCTYPE HTML>后登录页输入框100%宽度超出容器问题

嘿，我太懂你这个困扰了——之前我做登录页的时候也碰到过一模一样的情况！当加上<!DOCTYPE HTML>后，浏览器切换到了标准渲染模式，盒模型的计算规则变了，这就是输入框超出容器的根源。

问题原因拆解 #

你的.loginbox已经设置了box-sizing: border-box，所以它的320px宽度是包含自身左右30px padding的，实际内容区宽度是320px - 30px*2 = 260px。但你的输入框没设置box-sizing，在标准模式下，width:100%只会计算输入框的内容区宽度，如果输入框还有默认的padding或border，总宽度就会超过260px，自然就超出容器了。

两种快速解决方法 #

方法一：单独给输入框设置盒模型

直接给登录框内的输入框加上box-sizing: border-box，让它的宽度计算包含padding和border：

.loginbox {
    width: 320px;
    height: 440px;
    background: #000;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 70px 30px;
}

/* 新增输入框样式 */
.loginbox input {
    width: 100%;
    box-sizing: border-box; /* 核心属性 */
    padding: 8px 10px; /* 示例内边距，根据需求调整 */
    border: 1px solid #666; /* 示例边框 */
    margin: 8px 0;
    background: #222;
    color: #fff;
}

方法二：全局统一盒模型（更推荐）

如果不想每个元素都单独设置，可以给所有元素统一设置box-sizing: border-box，一劳永逸解决类似问题：

/* 全局样式放在最前面 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.loginbox {
    width: 320px;
    height: 440px;
    background: #000;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 70px 30px;
}

.loginbox input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #666;
    margin: 8px 0;
    background: #222;
    color: #fff;
}

这样设置后，输入框的width:100%就会完美适配容器的内容区，再也不会超出啦！

内容的提问来源于stack exchange，提问作者Kolawole Emmanuel Izzy