1.?将网页或元素居中??? ? ?
? ? ?
?? ?
HTML：
?
- <div?class="wrap">??
- </div><!--?end?wrap?-->??
CSS：
?
- .wrap?{?width:960px;?margin:0?auto;}??
?
?
2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
? ? 
? ?
?
HTML：
?
- <div?id="wrap">??
- ??
- <div?id="main"?class="clearfix">??
- ??
- </div>??
- ??
- </div>??
- ??
- <div?id="footer">??
- ??
- </div>??
CSS：
?
- *?{?margin:0;?padding:0;?}???
- ??
- html,?body,?#wrap?{?height:?100%;?}??
- ??
- body?>?#wrap?{height:?auto;?min-height:?100%;}??
- ??
- #main?{?padding-bottom:?150px;?}??/*?must?be?same?height?as?the?footer?*/??
- ??
- #footer?{??
- ????????position:?relative;??
- ?margin-top:?-150px;?/*?negative?value?of?footer?height?*/??
- ?height:?150px;??
- ?clear:both;}???
- ??
- /*?CLEAR?FIX*/??
- .clearfix:after?{content:?".";??
- ?display:?block;??
- ?height:?0;??
- ?clear:?both;??
- ?visibility:?hidden;}??
- .clearfix?{display:?inline-block;}??
- /*?Hides?from?IE-mac?*/??
- *?html?.clearfix?{?height:?1%;}??
- .clearfix?{display:?block;}??
- /*?End?hide?from?IE-mac?*/??
?
3.跨浏览器最小高度设置?? ? ?
?? ????
?CSS：
?
- .element?{?min-height:600px;?height:auto?!important;?height:600px;?}??
?
?
4.Box阴影(CSS3)
? ? 
? ?
?? ?
CSS：
?
- .box?{?box-shadow:?5px?5px?5px?#666;??-moz-box-shadow:?5px?5px?5px?#666;??-webkit-box-shadow:?5px?5px?5px?#666;?}??
?
5.文字阴影（CSS3）
? ? 
?? ?????
CSS：
?
- .text?{?text-shadow:?1px?1px?1px?#666;?filter:?Shadow(Color=#666666,?Direction=135,?Strength=5);?}??
?
6.跨浏览器的CSS透明度
? ? 
?
CSS：
- .transparent?{??
- ????
- ??/*?Modern?Browsers?*/?opacity:?0.7;??
- ??
- ??/*?IE?8?*/?-ms-filter:?"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";??
- ??
- ??/*?IE?5-7?*/?filter:?alpha(opacity=70);??
- ??
- ??/*?Netscape?*/?-moz-opacity:?0.7;??
- ??
- ??/*?Safari?1?*/?-khtml-opacity:?0.7;??
- ????
- }??
?
?
7.著名的 Meyer Reset（重置）
? ? 
?
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;??
- }??
- /*?remember?to?define?focus?styles!?*/??
- :focus?{??
- ?outline:?0;??
- }??
- body?{??
- ?line-height:?1;??
- ?color:?black;??
- ?background:?white;??
- }??
- ol,?ul?{??
- ?list-style:?none;??
- }??
- /*?tables?still?need?'cellspacing="0"'?in?the?markup?*/??
- 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;?/*?future?proofing?*/??
- }??
- .element-top-left-corner?{??
- ?-moz-border-radius-topleft:?5px;??
- ?-webkit-border-top-left-radius:?5px;??
- }??
?
10.覆盖内联的样式
?? ??
?CSS:
?
- .override?{??
- ?font-size:?14px?!important;??
- } ?
点击查看原文：http://webdevmania.com/archive/top_10_css_snippets/