10个非常有用的CSS技巧.docx

1. 将网页或元素居中 HTML：1. 2. CSS：1. .wrap width:960px; margin:0 auto; 2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)HTML：1. 2.3. 4.5. 6.7. 8.9. 10.11. 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.