CSS学习笔记:id与class、padding和margin、min-height和height


  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中会招致 无奈浮起,从而使布局 混乱 。