css使用技巧

CSS使用技巧

知识点1.CSS对齐

margin属性针对水平对齐
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。
注意：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位
position:absolute;
right:0px;
使用 float 属性来进行左和右对齐 
float:right;

知识点2.cursor 指针

	url
	default
	auto
	crosshair 十字
	pointer 手状
	move移动
	text 文本
	wait 沙漏
	help问号
	（e,ne,nw,n,se,sw,s,w）-resize 各方向缩放

知识点3.ul标签padding默认值

ul标签在一些浏览器中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题
注意：最好是在页面第一个样式处，定义*{padding:0px;margin:0px;}

知识点4.无法定义1Px左右高度的容器

为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法：
在ie6下加入font-size：0px；

知识点5.文字大小实际高度

font-size:14px;
ie 实际占高16px，下留白3px（用截图工具测量的）
firefox下占20个像素，上留白5个像素，下留白3个像素
解决办法：用line-height：限定行高度。保持行高与ie下相同就可以了

知识点6.CSS在不同浏览器下的支持

!important      可被FireFox和IE7识别
*                   可被IE6、IE7识别
_                   可被IE6识别
*+                 可被IE7识别

知识点7.margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

知识点8.解决兼容问题的注释块

    <!--[if IE 7]>
    <link href="css/IE7style.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if IE 6]>
    <link href="css/IE6style.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if gte IE 8]>
    <link href="css/IE8style.css" rel="stylesheet" type="text/css" />
    <![endif]-->

	<!--[if ]>
	内容
	<![endif]-->
			gt        >
				[if gt IE 6]
			gte    >=
				[if gte IE 8]
			lt     <
				[if lt IE 8]
			lte     <=
				[if lte IE 8]
			非      !
				[if ! IE 6]
			CSS Hack
尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。