1、问题背景
在做项目过程中，发现input输入框利用外联样式，控制不了输入框的样式
2、问题原因
（1）HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/common.css" />
</head>
<body>
<input type="text" />
</body>
</html>
（2）CSS代码
input{
font-family: "微软雅黑";
font-size: 20px;
color: #FF0000;
text-align: center;
width: 400px;
height: 300px;
vertical-align: middle;
}
3、解决办法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" style="font-family: '微软雅黑';font-size: 20px;color: #FF0000;width: 400px; height: 300px;text-align: center;vertical-align: middle;" value="100"/>
</body>
</html> （2）style标签嵌入式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input{
font-family: "微软雅黑";
font-size: 20px;
color: #FF0000;
width: 400px;
height: 300px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<input type="text" value="100"/>
</body>
</html> ![一个小小的移动web版音乐播放器[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)