flex布局：输入框布局demo

目标效果

首先，生成输入框：

• 代码：
  
• 结果：
  

设置基本样式

包括：去除边距、设置父盒子的宽度(如果不设置宽度，会使用整个浏览器的宽度）、添加父盒子边框等

• 代码：

*{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布局（注意选中的是第三个元素）

去除文本框的边框

点击文本框前：

点击文本框后，文本框内容框会有加粗的外框：

如果不想要，可以添加代码去掉：