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://www.cnblogs.com/hnyei/archive/2011/11/12/hnyei.html，如需转载请自行联系原作者
