css中 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中都可以自适应高度,正确的做法
相关文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Hack: 区分 I ......
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然
后插入文字,就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方
案是在这个div里面加上display:inline;
例如:
<#div ......
转自:http://www.boy110.com/csslimitedwidth/ CSS限制图片最大宽度,兼容IE6/IE7/IE8/FF,用做管理后台应该没问题! 我们在制作一个网页的时候,经常要对一个区域里可能出现的图片的宽度进行限制,不然它可能会把页面撑得很烂很烂。
如果你采用固定宽度,长度来设置的话,比如在 200 ? "200px" : this.wid ......
png透明 AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true:默认值。滤镜激活。false:滤镜被禁止。
sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图 ......
这本书不错,详细介绍了CSS的相关知识,对初学者和想进一步学习的人都有帮助。
相关笔记:
行内样式>ID样式>类样式>标记样式
font-weight:bold;
font-size:30px;
text-decoration:underline;
& ......