浅谈CSS使用的技巧及纵横向书写的特点
浅谈CSS使用的技巧及纵横向书写的特点
1.检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver
的验证功能检查一下有无错误。
2.检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3.确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。
4.利用border属性确定出错元素的布局特性
css横向滚动条隐藏使用float属性布局一不小心就会出错。这时为元素添加
border属性确定元素边界，错误原因即水落石出。
5.float元素的父元素不能指定clear属性
MacIE下如果对float的元素的.父元素使用clear属性，周围
的float元素布局就会混乱。这是MacIE的着名的bug，倘若不知
道就会走弯路。
6.float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以
不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7.float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack 方法为IE指定特别的值。
8.float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9.是否重设了默认的样式?
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等
纵向书写特点：
每个CSS属性独立一行，一般不会出现换行或横向滚动条。
可以通过firebug等工具查到模块，在DW中ctrl+g行定位，修改方便。
属性段落间有缩进，保证了代码的整洁，层次清楚，符合编程语言代码规范，修改更加直观。
存在的问题：代码冗余(如空格符、tab符、换行符)；文件大小增加；容易出现纵向滚动条。
横向书写特点：
最大化的利用了空间，单屏内能显示更多，减小了纵向滚动条出现的几率，能够快速捕获较多的信息。
减小了文件大小，省去了不必要的空格、换行等。
横向书写方便分块以及注释，便于查看CSS结构，选择符一目了然。当今显示器正朝着越来越大，越来越宽发展，基本上一行内可以显示完全。
加快编写CSS速度，不用每次敲换行和tab，并且减少拉动滚动
条的次数。
如果是活动页，不用作压缩处理。使用CSSoptimizers来优化CSS是提倡的，但是使用横向书写，基本上不存在多余的空格和换行，因此可以不用压缩，这样效率和能力都会得到提高。
便于阅读和查相关结构。代码编辑器对同行数定位做的都比较好，因此我们要解决的是如何快速纵向定位目标。横向书写时选择
符纵向对齐，再加上
.class_name_2.class_name_2_1.class_name_2_1_1的选择符层
次分明，因此很容易定位到目标。
在调试小Bug的时候就可以直接打开CSS更改，不用再打开firebug去到模块。
横向书写，是基于CSS选择符的写法，层次容易对比，更利于模块化。对整体CSS规划有好处，后期维护成本低。
便于不同版本的CSS代码对比。
存在的问题：书写过密，从而影响阅读。这种弊端显而易见，但只要优化做到家，这种状况会很少。
尽管对于现如今的带宽来说，网页文件那仅以K为单位的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是
网页设计师们应该考虑的问题之一。而横向书写省去了不必要的空格、换行等，大大减小了文件大小。我们不能说哪种书写是对的，
至于具体采用哪种写法依个人选择，当然改变习惯可能会影响一个
人的工作效率，那我们提倡的是：提交的CSS样式文件是经过代码
格式化的，而这个工作可以完全交给DW等工具，我们只要点击一下，整个文件就会像我们想象的那样呈现出来。这样的代码看起来很舒服，修改容易，团队成员在后续交接也会变得更加顺利。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。