Web开发者不容错过的20段CSS代码

 

 

       网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。

 

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-size: 100%;

  font: inherit;

  vertical-align: baseline;

  outline: none;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

html { height: 101%; }

body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

 

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

strong { font-weight: bold; }

 

table { border-collapse: collapse; border-spacing: 0; }

img { border: 0; max-width: 100%; }

 

p { font-size: 1.2em; line-height: 1.0em; color: #333; }

 

 

     这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。

 

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block; }

 <font></font> 

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

 

 

在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。

 

.clearfix:before, .container:after { content: ""; display: table; }<font></font> 

.clearfix:after { clear: both; }

/* IE 6/7 */

.clearfix { zoom: 1; }

 

 

     CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

 

.transparent {

    filter: alpha(opacity=50);

/* internet explorer */

    -khtml-opacity: 0.5;     

/* khtml, old safari */

    -moz-opacity: 0.5;      

/* mozilla, netscape */

    opacity: 0.5;          

/* fx, safari, opera */

}

源码地址： http://perishablepress.com/cross-browser-transparency-via-css/

 

 

    这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。 

blockquote {

    background: #f9f9f9;<

    border-left: 10px solid #ccc;

    margin: 1.5em 10px;

    padding: .5em 10px;

    quotes: "\201C""\201D""\2018""\2019";

}

blockquote:before {

    color: #ccc;

    content: open-quote; 

    font-size: 4em;

    line-height: .1em;

    margin-right: .25em;

    vertical-align: -.4em;

}

blockquote p {

    display: inline;

}