常用的CSS细节

1.将网页或元素居中

HTML:

<divclass="wrap">
</div><!--endwrap-->

CSS:

.wrap{width:960px;margin:0auto;}

2.StickyFooter(让页脚永远停靠在页面底部,而不是根据绝对位置)

HTML:

<divid="wrap">

<divid="main"class="clearfix">

</div>

</div>

<divid="footer">

</div>

CSS:

*{margin:0;padding:0;}

html,body,#wrap{height:100%;}

body>#wrap{height:auto;min-height:100%;}

#main{padding-bottom:150px;}/*mustbesameheightasthefooter*/

#footer{
position:relative;
margin-top:-150px;/*negativevalueoffooterheight*/
height:150px;
clear:both;}

/*CLEARFIX*/
.clearfix:after{content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;}
.clearfix{display:inline-block;}
/*HidesfromIE-mac*/
*html.clearfix{height:1%;}
.clearfix{display:block;}
/*EndhidefromIE-mac*/

3.跨浏览器最小高度设置

CSS:

.element{min-height:600px;height:auto!important;height:600px;}

4.Box阴影(CSS3)

CSS:

.box{box-shadow:5px5px5px#666;-moz-box-shadow:5px5px5px#666;-webkit-box-shadow:5px5px5px#666;}

5.文字阴影(CSS3)

CSS:

.text{text-shadow:1px1px1px#666;filter:Shadow(Color=#666666,Direction=135,Strength=5);}

6.跨浏览器的CSS透明度

CSS:

.transparent{

/*ModernBrowsers*/opacity:0.7;

/*IE8*/-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;

/*IE5-7*/filter:alpha(opacity=70);

/*Netscape*/-moz-opacity:0.7;

/*Safari1*/-khtml-opacity:0.7;

}

7.著名的MeyerReset(重置)

CSS:

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
/*remembertodefinefocusstyles!*/
:focus{
outline:0;
}
body{
line-height:1;
color:black;
background:white;
}
ol,ul{
list-style:none;
}
/*tablesstillneed’cellspacing=“0”‘inthemarkup*/
table{
border-collapse:separate;
border-spacing:0;
}
caption,th,td{
text-align:left;
font-weight:normal;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:”“;
}
blockquote,q{
quotes:”“”“;
}

8.删除虚线轮廓

CSS:

a,a:active{outline:none;}

9.圆角

CSS:

.element{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;/*futureproofing*/
}
.element-top-left-corner{
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}

10.覆盖内联的样式

CSS:

.override{
font-size:14px!important;
}