1. 将网页或元素居中
HTML:
<div class="wrap"> </div><!-- end wrap -->
CSS:
.wrap { width:960px; margin:0 auto;}
2.Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
![](https://i-blog.csdnimg.cn/blog_migrate/437190a48d3500ba7896832064283555.jpeg)
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.跨浏览器最小高度设置
![](https://i-blog.csdnimg.cn/blog_migrate/ec6f19a208b6093e2e1d27982e429971.jpeg)
CSS:
.element { min-height:600px; height:auto !important; height:600px; }
4.Box阴影(CSS3)
![](https://i-blog.csdnimg.cn/blog_migrate/7b272c67049d5c40b760a97a0d70920f.jpeg)
CSS:
.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
5.文字阴影(CSS3)
![](https://i-blog.csdnimg.cn/blog_migrate/c49612e6292d090f85cc55919600db00.jpeg)
CSS:
.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
6.跨浏览器的CSS透明度
![](https://i-blog.csdnimg.cn/blog_migrate/7759b0406a59872c7af36c85b5522c1e.jpeg)
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(重置)
![](https://i-blog.csdnimg.cn/blog_migrate/a5a2b1c30d0665ea3805a3aafa989b1b.jpeg)
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.删除虚线轮廓
![](https://i-blog.csdnimg.cn/blog_migrate/498517fe6b9a2090ac1300b92b7815b7.jpeg)
CSS:
a, a:active { outline: none; }
9.圆角
![](https://i-blog.csdnimg.cn/blog_migrate/1a2cb741753c928068f07d11db7c6bb9.jpeg)
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.覆盖内联的样式
![](https://i-blog.csdnimg.cn/blog_migrate/b7c760c1822b856b66aada33dc068c9c.jpeg)
CSS: