目标效果
首先，生成输入框：
- 代码：
- 结果：
设置基本样式
包括：去除边距、设置父盒子的宽度(如果不设置宽度，会使用整个浏览器的宽度）、添加父盒子边框等
- 代码：
*{margin: 0;padding: 0;
}#main{width: 250px;border: 1px solid #dcdcdc;
}
- 结果：
设置2个label标签的样式
- code：
#main label{flex:1;background-color: #f5f5f5;font-family: "楷体";text-align: center; /* 文本居中*/
}
flex:1： 即按照1：1的比例对剩余的空间进行放大或者缩小
- 结果：
调整第二个label标签的样式
由于前面设置label标签为flex布局，因此对第二个label标签进一步设置也只能用flex布局（注意选中的是第三个元素）
去除文本框的边框
点击文本框前：
点击文本框后，文本框内容框会有加粗的外框：
如果不想要，可以添加代码去掉：
