永成整形:10个非常有用的CSS技巧 - Web前端 - JavaEye新闻

CSS：

1. * { margin:0; padding:0; }   
2.   
3. html, body, #wrap { height: 100%; }  
4.   
5. body > #wrap {height: auto; min-height: 100%;}  
6.   
7. #main { padding-bottom: 150px; }  /* must be same height as the footer */  
8.   
9. #footer {  
10.         position: relative;  
11.  margin-top: -150px; /* negative value of footer height */  
12.  height: 150px;  
13.  clear:both;}   
14.   
15. /* CLEAR FIX*/  
16. .clearfix:after {content: ".";  
17.  display: block;  
18.  height: 0;  
19.  clear: both;  
20.  visibility: hidden;}  
21. .clearfix {display: inline-block;}  
22. /* Hides from IE-mac */  
23. * html .clearfix { height: 1%;}  
24. .clearfix {display: block;}  
25. /* End hide from IE-mac */  

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

 CSS：

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

4.Box阴影(CSS3)
   

    
CSS：

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

5.文字阴影（CSS3）

CSS：

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

6.跨浏览器的CSS透明度
   

CSS：

1. .transparent {  
2.     
3.   /* Modern Browsers */ opacity: 0.7;  
4.   
5.   /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
6.   
7.   /* IE 5-7 */ filter: alpha(opacity=70);  
8.   
9.   /* Netscape */ -moz-opacity: 0.7;  
10.   
11.   /* Safari 1 */ -khtml-opacity: 0.7;  
12.     
13. }  

7.著名的 Meyer Reset（重置）
   

CSS：

1.   html, body, div, span, applet, object, iframe,  
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
3. a, abbr, acronym, address, big, cite, code,  
4. del, dfn, em, font, img, ins, kbd, q, s, samp,  
5. small, strike, strong, sub, sup, tt, var,  
6. dl, dt, dd, ol, ul, li,  
7. fieldset, form, label, legend,  
8. table, caption, tbody, tfoot, thead, tr, th, td {  
9.  margin: 0;  
10.  padding: 0;  
11.  border: 0;  
12.  outline: 0;  
13.  font-weight: inherit;  
14.  font-style: inherit;  
15.  font-size: 100%;  
16.  font-family: inherit;  
17.  vertical-align: baseline;  
18. }  
19. /* remember to define focus styles! */  
20. :focus {  
21.  outline: 0;  
22. }  
23. body {  
24.  line-height: 1;  
25.  color: black;  
26.  background: white;  
27. }  
28. ol, ul {  
29.  list-style: none;  
30. }  
31. /* tables still need 'cellspacing="0"' in the markup */  
32. table {  
33.  border-collapse: separate;  
34.  border-spacing: 0;  
35. }  
36. caption, th, td {  
37.  text-align: left;  
38.  font-weight: normal;  
39. }  
40. blockquote:before, blockquote:after,  
41. q:before, q:after {  
42.  content: "";  
43. }  
44. blockquote, q {  
45.  quotes: "" "";  
46. }  
47.    

8.删除虚线轮廓      

CSS：

1. a, a:active { outline: none; }  

9.圆角
   

CSS：

1. .element {  
2.  -moz-border-radius: 5px;  
3.  -webkit-border-radius: 5px;  
4.  border-radius: 5px; /* future proofing */  
5. }  
6. .element-top-left-corner {  
7.  -moz-border-radius-topleft: 5px;  
8.  -webkit-border-top-left-radius: 5px;  
9. }  

10.覆盖内联的样式

 CSS:

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