25
2013-01

id与class、padding和margin、min-height和height

   Cssidclass的优点与缺点
  id的优点(class的缺点):id写在css "#"选择器,class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或 者id容器内的标签将是很容易和有效的。而class标签,或者class容器内的标签将可能导致优先级的提升失败。
  id的缺点(class 的优点):id应该是唯一的,所以它的可复用性是很差的,而class是可以复用的。所以如果一块东西是多个页面,甚至一个页面都会使用多次的,那么一定 要使用class来作为样式选择器。id是唯一的,当一个控件的id的产生是不可控的,那么这个id选择器将失去意义,但是任何一个控件即使是动态产生 的,他的cssClass仍然是可定制的,所以当你的这个标签需要用服务器端控件替代的时候,而服务器端控件的id是不确定的,那么请使用class选择 器,这样只要将服务器端控件的cssClass设为你class选择器的名称即可。(当然,这个还需要大量的经验的积累,项目做的多了就会逐步的改进)

       paddingmargin到底要用哪一个?

   paddingmargin可以让一块区域的外观显示完全一样。所以可能让很多人认为paddingmargin是可以互换的。其实它们的差别很 大,而且选择哪个需要认真和慎重地考虑。我认为对容器使用padding还是对容器内的标签使用margin的原则:当隐藏这个容器或者容器内的标签时 (现实项目中其实经常需要将某个部件隐藏、显示),对整体布局影响最小为益。
  对于padding再说一句:ie6ie7FF)对带有 padding样式的标签的宽度的解析是不一样的。ie6的标签宽度不包含padding-leftpadding-right的值,而ie7ff则 是包含的。例如一个divwidth设置100pxpadding设为10px,而在ie6中它要占据的宽度是120px(包含10padding-left10padding-right),而在ie7ff中则占据100px的宽度。因为ie7ff会认为100已经包含了 20pxpadding

       min-heightheight

  如果你只需要兼容ie6那么你完全不需要注意min-height这个样式,因为ie6根本就不支持这个样式。但是当你的页面需要照顾到ie7ff的时候,这个 样式一定要注意。因为很多在ie6下设置了height=固定值的样式,当容器被里面的东西撑的大于这个高度的时候,ie7ff是不会自适应高度的。从 而导致布局的混乱。要想在ie6ie7ff中都可以自适应高度,正确的做法是设置min-height和用cssHack设置height。例如:
s.  min-height:600px;
  _height:600px;


  这样,在容器里面的东西很少的时候,它显示固定高度600px,但当里面的东西很多的时候,它也会自适应的增长高度。
  对于height的设置一定要特别注意,如果是布局用的容器的height则需要特别的注意,否则在ff中会导致无法浮起,从而使布局混乱。



除非注明,文章均为史亚永原创,欢迎转载!转载请注明本文地址,谢谢。

本文地址:http://www.shiyayong.cn/post/id-class-padding-margin-min-height.html

评论列表:

8  网上买衣服  2013-3-6 19:21:29 回复该留言  IP:114.85.43.15
真的是很深奥。我看了好几分钟。没看明,不过我知道,这是我需要的。慢慢学吧,谢谢你的分享、
  茶馆老板  2013-3-11 19:59:08 回复该留言  IP:106.3.103.175
别着急,慢慢来
茶馆老板
网上买衣服
7  an9  2013-1-28 8:19:28 回复该留言  IP:124.225.205.225
技术博,不懂。
  茶馆老板  2013-1-28 9:23:51 回复该留言  IP:124.205.133.34
里面也有非技术的文章啊
茶馆老板
an9
6  好运鞋  2013-1-28 8:08:02 回复该留言  IP:60.213.166.151
我看技术方面的文章,就是看天书,但还是要慢慢熟悉的。
  茶馆老板  2013-1-28 9:23:20 回复该留言  IP:124.205.133.34
我的博客有推广类的文章啊,还有休闲阅读,在网络茶寮还有站长趣闻栏目下
茶馆老板
好运鞋
5  一格电  2013-1-27 18:15:51 回复该留言  IP:112.239.127.101
茶馆,你说采用无觅网会自动生成图片,那么这些图片对于网站的加载速度有没有什么影响啊
  茶馆老板  2013-1-27 20:54:00 回复该留言  IP:118.186.58.177
这个稍微会有点影响,不过这个不碍事的
茶馆老板
一格电
4  日天  2013-1-27 0:56:26 回复该留言  IP:222.82.191.12
margin和padding还有一个很重要的区别:margin是容器外部与其他容器的边距(不带背景),padding是容器内部与内容的边距(带背景)
  茶馆老板  2013-1-27 20:52:55 回复该留言  IP:118.186.58.177
这些具体的细微的小区别还是需要自己在操作中实践
茶馆老板
日天
3  谢若尧  2013-1-26 15:51:13 回复该留言  IP:115.153.138.234
我是被标题吸引进来的,对这些属性还是要多了解一下
  茶馆老板  2013-1-27 20:53:23 回复该留言  IP:118.186.58.177
你自己写过div+css吗?
茶馆老板
谢若尧
2  明月  2013-1-26 9:32:02 回复该留言  IP:125.92.180.193
问下博主一个问题,如果我不用背景图片的话,左右两侧的长度不一致时,短的那一列并不能自适应高度,我参考了网上的一些资料也还没能解决,请教下这个如果解决?
  茶馆老板  2013-1-26 9:51:58 回复该留言  IP:106.3.103.132
你这个是什么地方啊?你设置的高度是auto吗?问题有点不是太详细
  谢若尧  2013-1-27 20:54:47 回复该留言  IP:115.153.138.234
没有呢,要是自己能写就好了
  茶馆老板  2013-1-27 21:00:10 回复该留言  IP:118.186.58.177
简单的应该可以写吧
  谢若尧  2013-1-27 21:01:43 回复该留言  IP:115.153.138.234
简单的应该可以吧,但是没试过
  茶馆老板  2013-1-27 21:34:15 回复该留言  IP:118.186.58.177
可以试着自己写写
茶馆老板
谢若尧
茶馆老板
谢若尧
茶馆老板
明月
1  明月  2013-1-26 9:28:20 回复该留言  IP:125.92.180.193
谢谢博主分享的技术文章,很受用.
明月

发表评论:

(设置个性头像)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

无觅相关文章插件,快速提升流量