CSS样式表完全不生效，新手求助代码修改方案

嘿，作为CSS新手，这个问题确实是很容易踩的小陷阱！我看了你的代码，马上就找到问题所在了——所有的长度值都缺少单位，浏览器根本无法识别这些没有单位的数值，所以你的CSS样式才没生效。

具体问题点 #

在CSS中，除了数值为0的情况，所有长度属性（比如width、height、margin、padding、font-size等）都必须指定单位（最常用的是px，也就是像素）。你代码里的.button和.textview类中的很多属性都只写了数字，比如width:50、height:50，这是不符合CSS语法规范的。

修复后的完整代码 #

<html>
<head>
<script>
</script>
<style>
*{
margin:0;
padding:0;
}
.button{
width:50px;
height:50px;
font-size:25px;
margin:2px;
cursor:pointer;
}
.textview{
width:217px;
margin:5px;
font-size:25px;
padding:5px;
}
</style>
</head>
<body>
<div class="main">
<form name = "form">
<input class="textview">
</form>
<table>
<tr>
<td><input class="button" type="button" value="C"></td>
<td><input class="button" type="button" value="<"></td>
<td><input class="button" type="button" value="/"></td>
<td><input class="button" type="button" value="X"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input class="button" type="button" value="5"></td>
<td><input class="button" type="button" value="6"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1"></td>
<td><input class="button" type="button" value="2"></td>
<td><input class="button" type="button" value="3"></td>
<td><input class="button" type="button" value="="></td>
</tr>
<tr>
<td><input class="button" type="button" value="1"></td>
<td><input class="button" type="button" value="2"></td>
<td><input class="button" type="button" value="3"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
</table>
</div>
</body>
</html>

总结修改项 #

• 给.button类的width、height、font-size、margin都加上px单位
• 给.textview类的width、margin、padding都加上px单位（注意font-size你已经加了px，这部分是对的）

这样修改后，你的按钮和输入框的样式就能正常显示啦！

内容的提问来源于stack exchange，提问作者user1975126