日期:2013-05-20  浏览次数:21165 次

核心提示:首先要明白id和class的各自的优缺点。这样才能依据他们的各自的特点进行使用。

  id和class到底要用哪一个?

  首先要明白id和class的各自的优缺点。这样才能依据他们的各自的特点进行使用。


  id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍,所以当你需求提升优先级的时候,id标签,或者id容器内的标签将是很容易和无效的。而class标签,或者class容器内的标签将可能导致优先级的提升失败。


  id的缺点(class的优点):id应该是独一的,所以它的可复用性是很差的,而class是可以复用的。所以如果一块东西是多个页面,甚至一个页面都会使用多次的,那么一定要使用class来作为款式选择器。id是独一的,当一个控件的id的产生是不可控的,那么这个id选择器将得到意义,但是任何一个控件即便是动态产生的,他的cssClass仍然是可定制的,所以当你的这个标签需求用服务器端控件替代的时候,而服务器端控件的id是不确定的,那么请使用class选择器,这样只需将服务器端控件的cssClass设为你class选择器的名称即可。(当然,这个还需求大量的经验的积累,项目做的多了就会逐渐的改进) 

  padding和margin到底要用哪一个? 

  padding和margin可以让一块区域的外观显示完全一样。所以可能让很多人认为padding和margin是可以互换的。其实它们的差别很大,而且选择哪个需求认真和慎重地考虑。我认为对容器使用padding还是对容器内的标签使用margin的准绳:当隐藏这个容器或者容器内的标签时(理想项目中其实经常需求将某个部件隐藏、显示),对全体规划影响最小为益。


  对于padding再说一句:ie6,ie7(FF)对带有padding款式的标签的宽度的解析是不一样的。ie6的标签宽度不包含padding-left和padding-right的值,而ie7和ff则是包含的。例如一个div的width设置100px,padding设为10px,而在ie6中它要占据的宽度是120px(包含10个padding-left和10个padding-right),而在ie7和ff中则占据100px的宽度。由于ie7和ff会认为100曾经包含了20px的padding。 

  min-height和height

  如果你只需求兼容ie6那么你完全不需求留意min-height这个款式,由于ie6基本就不支持这个款式。但是当你的页面需求照顾到ie7和ff的时候,这个款式一定要留意。由于很多在ie6下设置了height=固定值的款式,当容器被里面的东西撑的大于这个高度的时候,ie7和ff是不会自顺应高度的。从而导致规划的混乱。要想在ie6,ie7和ff中都可以自顺应高度,正确的做法是设置min-height和用cssHack设置height。例如:

.52css.com]
  min-height:600px;
  _height:600px;


  这样,在容器里面的东西很少的时候,它显示固定高度600px,但当里面的东西很多的时候,它也会自顺应的增长高度。


  对于height的设置一定要特别留意,如果是规划用的容器的height则需求特别的留意,否则在ff中会导致无法浮起,从而使规划混乱。