日期:2014-05-17 浏览次数:20736 次
目的:减少各种浏览器下默认样式的差异。?
方法:
/* =====================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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ========================================== */?
参考链接:http://meyerweb.com/eric/tools/css/reset/index.html;?
http://apps.hi.baidu.com/share/detail/16981702
?
?
? ? ?css中有个头疼的东西:布局。 使用float可能会带出很多排版上的错误,这时就可以利用clearfix来清除多余的float影响。
/* ========================= clearfix =============================== */ /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ .clearfix:before, .clearfix:after{ content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .clearfix:after{ clear: both; } /* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */ .clearfix{ zoom: 1; }
?
2. ? 在使用float:left 或者 float:right的HTML标签上调用clearfix
<div id="wraper" class="clearfix">
?
参考链接:http://www.cnblogs.com/zllwebjs/archive/2010/03/19/1689980.html