css样式整理

• 默认重置所有浏览器自带样式css
• • 手机屏幕适应
  • css清除浮动样式
  • css阴影兼容
  • css渐变背景兼容
  • css超出显示省略号
  • css宽度和高度分别不计算padding和border的大小

默认重置所有浏览器自带样式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 {padding: 0;margin: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 */
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;}

手机屏幕适应

var pixRatio=1/window.devicePixelRatio;
var html =document.documentElement;
document.write('<meta name ="viewport" content="width=device-width,user-scalable=no,initial-scale='+pixRatio+',minimum-scale='+pixRatio+',maximum-scale='+pixRatio+'">')
html.style.fontSize=html.clientWidth/25+'px';

css清除浮动样式

.clearfix:after {
content:” ”;
display:block;
height:0;
clear:both;
}
.clearfix { *zoom:1; } 

css阴影兼容

/*外阴影*/
-moz-box-shadow:2px 2px 5px #333333;
-webkit-box-shadow:2px 2px 5px #333333;
box-shadow:2px 2px 5px #333333;

/*内阴影*/
-moz-box-shadow:inset 2px 5px #333333;
-webkit-box-shadow:inset 2px 5px #333333;
box-shadow:inset 2px 5px #333333;

css渐变背景兼容

background:-moz-linear-gradient(top, #CCC, #333);
background:-webkit-gradient(linear, top, from(#CCC), to(#333));
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorStr='#CCC',endColorStr='#333');
background: -ms-linear-gradient(#CCC 0%,#333 100%);

css超出显示省略号

/* 显示一行，省略号 */
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;
 
/* 显示两行，省略号 */
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 2;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

css宽度和高度分别不计算padding和border的大小

-webkit-box-sizing: border-box;/* Safari */
-moz-box-sizing: border-box;/* Firefox */
box-sizing: border-box;