id和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和用css教程Hack设置height。例如:

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

 

 

时间: 2024-09-21 18:34:30

id和class区别与 padding和margin区别的相关文章

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

核心提示:首先要明白id和class的各自的优缺点.这样才能根据他们的各自的特点进行使用. id和class到底要用哪一个? 首先要明白id和class的各自的优缺点.这样才能根据他们的各自的特点进行使用. id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器."#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有

css padding 与margin的区别

css padding 与margin的区别,下面我们来看看一张图片,然后再来具体的根据图片进行分析padding 与margin的区别何在吧 如上图,A,B两个方框,A代码padding,B代表margin,现在我们看A箭头与蓝色边框的距离,这就是padding叫做内边距,下面再来看看B外面的箭头与B之前的距离就是我们所说的margin的,叫做外间距,哈哈你现在应该明白了,什么是padding,什么是margin, 本站原创转载请注明来处www.111cn.net

Android中gravity、layout_gravity、padding、margin的区别小结_Android

1.gravity与layout_gravity的区别 gravity 属性是对该view 内容的限定.比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置.该属性就干了这个. layout_gravity 是用来设置该view相对与起父view 的位置.比如一个button 在linearlayout里,你想把该button放在靠左 靠右等位置就可以通过该属性设置. 这样就解释了,有什么我们弄个最外布局,然后里面包了几个布局,如果要使这几个布局都靠底,就可

Android中gravity、layout_gravity、padding、margin的区别小结

1.gravity与layout_gravity的区别 gravity 属性是对该view 内容的限定.比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置.该属性就干了这个. layout_gravity 是用来设置该view相对与起父view 的位置.比如一个button 在linearlayout里,你想把该button放在靠左 靠右等位置就可以通过该属性设置. 这样就解释了,有什么我们弄个最外布局,然后里面包了几个布局,如果要使这几个布局都靠底,就可

关于ol和ul的padding和margin默认值

 ol, ul { padding-left:40px; } 而IE的默认样式是: ol, ul { margin-left:30pt; } Opera 8或者以前的版本是否和IE一样?有兴趣的同志可以自行测试. 但这至少说明一点,除了微软之外的浏览器厂商都达成一致意见,list的缩进应该使用padding来控制.其实这很好理解,缩进的是每一个item而不是整个的list.设计者对list有怎样的期望呢?比如说设置了ul的background:green,多数人应会期待整个ul(即包括了padd

Android零基础入门第27节:正确使用padding和margin

原文:Android零基础入门第27节:正确使用padding和margin 前面两期我们学习了LinearLayout线性布局的方向.填充模型.权重和对齐,那么本期我们来学习LinearLayout线性布局的内边距和外边距. 关于padding和margin,很多同学傻傻分不清,相信通过今天的学习可以正确使用.     一.内边距padding 默认情况下,组件相互之间是紧紧靠在一起的.但是有时候需要组件各边之间有一定的内边距,那就可以通过以下几个属性来设置,内边距的值是具体的尺寸,如5dp.

各浏览器padding、margin的差异_经验交流

margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:IE 6.0 Firefox Opera等是真实宽度=width+padding+border+marginIE5.X真实宽度=width-padding-border-margin 解决的方法是: div.content { width:400px; //这个是错误的width,所有浏览器都读到了voice-family: "\"}\""; //IE5.X/wi

浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别_jquery

hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数: $(selector).hide(speed,callback); $(selector).fadeOut(speed,callback); 首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已.但是当我们把参数 speed 设置稍微长一些就可以看出

orcale和mysql的区别orcale和mysql的区别orcale和mysql的区别

问题描述 orcale和mysql的区别orcale和mysql的区别orcale和mysql的区别 他两个有什么不同 想听大神总结出他们之间的不同之处越详细越好!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 解决方案 oracle是要付费的,是强大的商业化数据库,安全性高,付费软件优势很明显. mysql开源,但是mysql不支持视图;不支持commit-rollback,有效处理commit-rollback将