Php 输入字段CSS代码不为'；添加doctype html时无法正确呈现

我正在使用一个简单的登录页面和一个登录表单。当我添加

<时！DOCTYPE HTML>

，当设置为100%宽度时，输入字段比容器绘制得更远。我已经寻找解决方案，并注意到问问题，考虑DOCTYPE弄乱CSS是关于一个特定的问题。 下面是我的代码

.loginbox{
宽度：320px；
高度：440px；
背景：#000；
颜色：#fff；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
框大小：边框框；
填充：70px 30px；
}
@仅介质屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）{
.loginbox{
宽度：450px；
高度：480px；
填充：90px 30px；
}
.inputContainer输入{
边缘底部：30px；
}
}
罗吉纳瓦塔酒店{
宽度：100px；
高度：100px；
边界半径：50%；
位置：绝对位置；
顶部：-50px；
左：计算（50%-50px）；
}
.loginbox h1{
字体大小：22px；
文本对齐：居中；
保证金：0；
填充：0 20px；
}
.inputContainer输入{
边缘底部：20px；
}
输入：-webkit自动填充{
-webkit文本填充颜色：#ffffff！重要；
过渡色：背景色5000秒，进退0秒；
-webkit过渡：背景色5000s，易入易出0s；
}
.inputContainer输入[type=“text”]，
输入[type=“password”]{
宽度：100%；
高度：42px；
背景：透明；
颜色：#fff；
字体大小：14px；
字体家族：继承；
字体大小：400；
边界：无；
边框底部：1px实心#333；
大纲：无；
左侧填充：25px；
}
.逻辑{
位置：绝对位置；
最高：20%；
}
.usernithicon，
passnithicon先生{
位置：相对位置；
}
.inputContainer输入[type=“text”]：悬停，
输入[type=“password”]：悬停，
输入[type=“text”]：焦点，
输入[type=“password”]：焦点{
边框底部：1px实心#bc2333；
}
.inputContainer.inputBox标签{
位置：绝对位置；
排名：0；
左：10%；
填充：15px0；
字体大小：14px；
指针事件：无；
过渡：.5s；
}
.inputContainer.inputBox输入：焦点~标签，
.inputContainer.inputBox输入：有效~标签{
顶部：-18px；
左：10%；
字体大小：12px；
颜色：#bc2333；
}
输入[类型=复选框]+标签{
显示：块；
保证金：3px 3px 20px；
光标：指针；
填充：0；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签：在{
内容：“\2714”；
边框：1px实心#fff；
边界半径：0.2米；
显示：内联块；
宽度：1米；
高度：1米；
左侧填充：0.2米；
垫底：0.3em；
右边距：0.2米；
垂直对齐：底部对齐；
颜色：透明；
过渡：.2s；
}
输入[类型=复选框]+标签：活动：之前{
变换：比例（0）；
}
输入[类型=复选框]：选中+标签：之前{
背景色：#bc2333；
边框颜色：#bc2333；
颜色：#fff；
}
输入[类型=复选框]：选中：禁用+标签：之前{
变换：比例（1）；
背景色：#bc2333；
边框颜色：#bc2333；
不透明度：0.5；
}
输入[类型=复选框]：禁用+标签：之前{
变换：比例（1）；
边框颜色：#fff；
不透明度：0.2；
}
.inputContainer输入[type=“submit”]{
宽度：100%；
高度：48px；
背景#bc2333；
颜色：#fff；
字体大小：16px；
字号：500；
字体家族：继承；
边界：0；
大纲：无；
}
.inputContainer输入[type=“submit”]：悬停{
光标：指针；
背景：#7a091f；
过渡：放松；
}
.输入容器a{
颜色：#fff；
显示：块；
文字装饰：无；
文本对齐：居中；
}
.inputContainer a:悬停{
颜色：#F4；
过渡：放松；
}

会员登录
登录表单
用户名
密码
记得我吗

基于您想要的，我添加了

显示：内联flex

试试这个

.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;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .loginbox {
    width: 450px;
    height: 480px;
    padding: 90px 30px;
  }
  .inputContainer input {
    margin-bottom: 30px;
  }
}

.loginavatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: calc(50% - 50px);
}

.loginbox h1 {
  font-size: 22px;
  text-align: center;
  margin: 0;
  padding: 0 0 20px;
}

.inputContainer input {
  margin-bottom: 20px;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
}

.inputContainer input[type="text"],
input[type="password"] {
  width: 100%;
  height: 42px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  border: none;
  border-bottom: 1px solid #333;
  outline: none;
  padding-left: 20px;
}

.logico {
  position: absolute;
  top: 20%;
}

.usernithicon,
.passnithicon {
      position: relative;
    display: inline-flex;
    align-items: baseline;
    width: 100%;
}

.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
  border-bottom: 1px solid #bc2333;
}

.inputContainer .inputBox label {
  position: absolute;
  top: 0;
  left: 10%;
  padding: 15px 0 0 0;
  font-size: 14px;
  pointer-events: none;
  transition: .5s;
}

.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
  top: -22px;
  left: 10%;
  font-size: 12px;
  color: #bc2333;
}

input[type=checkbox]+label {
  display: block;
  margin: 3px 3px 20px;
  cursor: pointer;
  padding: 0;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label:before {
  content: "\2714";
  border: 1px solid #fff;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

input[type=checkbox]+label:active:before {
  transform: scale(0);
}

input[type=checkbox]:checked+label:before {
  background-color: #bc2333;
  border-color: #bc2333;
  color: #fff;
}

input[type=checkbox]:checked:disabled+label:before {
  transform: scale(1);
  background-color: #bc2333;
  border-color: #bc2333;
  opacity: 0.5;
}

input[type=checkbox]:disabled+label:before {
  transform: scale(1);
  border-color: #fff;
  opacity: 0.2;
}

.inputContainer input[type="submit"] {
  width: 100%;
  height: 48px;
  background: #bc2333;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  border: 0;
  outline: none;
}

.inputContainer input[type="submit"]:hover {
  cursor: pointer;
  background: #7a091f;
  transition: .3s ease;
}

.inputContainer a {
  color: #fff;
  display: block;
  text-decoration: none;
  text-align: center;
}

.inputContainer a:hover {
  color: #f4f4f4;
  transition: .2s ease;
}

作为背景，试试这个

body, html{
   height: 100%; 
   background-image: url('your_image_path')
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

您的问题是最初没有添加doctype。。。现在你所拥有的就是你所需要的，只需纠正它。。阅读本文：我比较困惑，但还有一个问题，文本光标现在写在字体图标下添加了[link]（）[/link]。填充的目的是将文本向前推，以便图标可以坐在字段中。和我添加的背景图像一样，它的渲染也不完美。我该怎么解决呢？这很有魅力。请@john velasquez如何处理共享视频中看到的背景。我设置了
背景尺寸：封面
，但仍然没有占据整个页面的高度。（在没有doctype的情况下可以正常工作，但在doctype显示时是这样的（我的意思是，正如我在视频中看到的那样））非常感谢@john velasquez，现在一切看起来都很好。：）很高兴听到：）请填写此答案，如果此答案回答了您的问题，谢谢：）