<style>
    /* outline去除input外轮廓,box-sizing:border-box计算元素宽高时不带内边距与边框宽高. */
    * {
        margin: 0;
        padding: 0;
        outline: none;			/* 用于移除元素的轮廓线 */
        box-sizing: border-box; /* 计算元素宽高时不带内边距与边框宽高 */
        /* outline: none;用于移除元素的轮廓线。
        当元素被选中或鼠标悬停在其上时，浏览器通常会显示一个轮廓线来表示该元素的位置和大小。
        通过将 outline 属性设置为 none，可以隐藏这个轮廓线。 */
        /* box-sizing: border-box;用于设置元素的盒模型。
        设置为 border-box 时，元素的宽度和高度包括内容、内边距和边框，而不是仅包括内容。
        这样可以避免在计算元素尺寸时出现额外的空间。 */
    }
    /* min-height:最小高度 */
    body {
        display: flex;/* 定义显示为flex的容器,子元素会自动排列在一行或一列中，以适应容器的可用空间。 */
        justify-content: center;/* 定义子元素在主轴上的对齐方式。 */				
        align-items: center;    /* 定义子元素在交叉轴上的对齐方式。*/
        min-height: 100vh; 		/* 设置最小高度为100vh，也就是屏幕高度 */
        /* background: linear-gradient(-135deg, #0099c8, #2133d0); */
        /* 背景渐变设置。创建一个从左下角开始，以-135度角度旋转的线性渐变背景。渐变的颜色从#0099c8（蓝色）到#2133d0（深紫色）。 */
        background: linear-gradient(-135deg, #eebef9, #a600d0);
    }

    .wrapper {
        width: 600px;				/* 设置宽度为600px */
        border: 1px solid gray;  /* 设置实线，边框为1px的灰色 */
        display: flex;			   /* 设置flex布局，html中该div下有两个子div，设置子div并列显示(默认) */
        padding: 30px;			   /* 上下左右内边距为30px */
        background-color: white; /* 背景色为白色 */
    }
    .wrapper .wrapper_son {		   /* 输入框所在的div样式 */
        padding:50px 0px;		   /* 上下内边距为50px，左右为0px */	
        position: relative;		   /* 相对定位 */
        width: 80%;				   /* 设置宽度为80%，是父元素的80% */
    }
    .wrapper .wrapper_QR{		   /* 二维码所在的div样式 */
        position: relative;		   /* 定位方式为相对定位 */
        width: 20%;				   /* 宽度为20%，是父元素的20% */
    }
    .wrapper label {			   /* label标签 */
        /* label标签用于为表单元素提供描述和说明 */
        position: absolute; 	   /* 绝对定位 */
		transform: translateY(-20px);
        /* 变换属性，它表示在Y轴方向上移动元素，将元素向上移动20像素 */
        font-size: 15px;		   /* 字体大小为15px */
        color: #4158D0;		  /* 颜色为#4158D0 */
    }
    .wrapper input {			   /* 输入框样式 */
        width: 80%;				   /* 宽度为80%，是input所在div的80% */
        height: 100%;			   /* 高度为100% */
        padding:10px 0px;		   /* 上下内边距为10px，左右为0px */
        border: none;			   /* 去除边框所有样式 */
        border-bottom: 2px solid #4158D0;/* 设置下边框为2px的颜色为#4158D0并为实线 */
        font-size: 17px;		   /* 输入框中的字体大小为17px */
    }
</style>

.wrapper label {			   /* label标签 */
    /* label标签用于为表单元素提供描述和说明 */
    position: absolute; 	   /* 绝对定位 */
    transform: translateY(0px);
    /* 变换属性，它表示在Y轴方向上移动元素，将元素向上移动20像素 */
    font-size: 15px;		   /* 字体大小为15px */
    color: #4158D0;		  /* 颜色为#4158D0 */
}

<label>URL:</label> 
<input id="text" type="text" value="https://www.baidu.com" /><br />