几个常用的css使用技巧

Take it easy. 别紧张。　　What a pity! 太遗憾了!　　Help yourself. 别客气。　　I’m on a diet. 我在节食。

 

1、让已知高度的容器在页面中水平垂直居中

方法：

#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

 

2、让未知尺寸的图片在已知宽高的容器内水平垂直居中

方法：

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
#test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中

 

3、让某个元素充满整个页面

方法：

html,body{height:100%;margin:0;}
#test{height:100%;}

 

4、去掉超链接的虚线框

方法：

a{outline:none;}

 

5、.容器透明，内容不透明

方法1：

.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}
<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的内容</div>

 

方法2：

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
<div class="outer">
<div class="inner">我是不透明的内容</div>
</div>

 

6、让整个页面水平居中

方法：

body{text-align:center;}
#test2{width:960px;margin:0 auto;text-align:left;}

定义body的text-align值为center将使得IE5.5也能实现居中