css 误区案例 |css网页模板案例

1. 长度单位认识不清：

.box{
width:50;
height:30px;
}

上述代码中，width的值没有带单位，实际上应该像height一样加上px。

2. 次序安排不当：

.box{
background-color: #fff;
color: #000;
text-align: center;
display: block;
}

上述代码中，display: block;应该放到前面，因为它会影响后面几项的表现。

3. 样式层叠问题：

.box{
color: #000;
color: #fff;
}

上述代码中，color: #000;会被后面的color: #fff;覆盖。

4. 文本属性混淆：

.box{
text-decoration: underline;
font-weight: bold;
}

上述代码中，underline并不是font-weight的一种属性，应该修改为text-decoration: none;

5. 选择器理解不准确：

.box span{
color: #000;
}

上述代码中，.box span是指box中包含的所有span元素，而非.box的后代中所有的span元素。

以上就是一些常见的CSS操作误区，如果你在使用CSS的过程中也遇到了相关的问题，不妨检查一下自己的代码是否出了问题。正确的操作方法不仅可以保证代码的顺利运行，还可以提高代码的可读性、可维护性。