一、重置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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}ins{text-decoration:none}li{list-style:none}table{font-size:inherit;font:100%;border-collapse:collapse;border-spacing:0}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}legend{color:#000}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select{margin:0;*font-size:100%;line-height:1.2}a img,img{-ms-interpolation-mode:bicubic}sub,sup{vertical-align:baseline}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block}pre{white-space:pre-wrap;word-wrap:break-word}
1.
body{font:12px/1.5 Tahoma,Arial,"\5b8b\4f53",Helvetica,sans-serif;*font-family:simsun;color:#333;background:#fff;font-size:12px}
这是css中font的简写写法。
字体：字体大小/字体行高 字体格式。
tahoma 大河马字体，Tahoma为Windows操作系统的英文默认字型。Tahoma是种非常圆滑的字体。这个字体比较均衡，中英文混排显示时，不会出现中英文不对齐的状态。
arial 是一套随同多套微软应用软件所分发的无衬线体TrueType字型
sans-serif 表示是无衬线字体，是一种通用字体族。
"\5b8b\4f53″ 就是 “宋体”。用 unicode 表示，不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。注释乱码：强烈建议不要用中文注释。font-family:’宋体’
*font-family:simsun;
在样式属性名前加*,这样的样式可以被IE6和IE7所识别,而其它浏览器则会当做错误忽略,所以,这样的样式写法只对IE6/7生效.
而_开头的属性只有IE6才能识别
a{color:#333;text-decoration:none}a:hover{color:#c70000}
a{color:#0063c8}:focus{outline-style:none;
-moz-outline-style:none}
当聚焦a标签的时候，在a标签的区域周围会有一个虚线的框
textarea{resize:none;overflow:auto}resize：是否允许拖拽textarea右下角调整大小 vertical; 只允许垂直方向拖拽horizontal; 只允许水平方向拖拽none; 不允许拖拽 both; 允许垂直 水平 拖拽
input[type=text]:focus,input[type=password]:focus,textarea:focus{outline:0}input,select,button{vertical-align:middle}a:active,button:active,input:active{outline:0}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}让父级元素不会因为子元素浮动之后，高度撑不开display:inline-block;*display:inline;*zoom:1;将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
兼容IE下块元素如何实现display:inline-block的效果：直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。
white-space:pre;word-break:keep-all;
word-break 属性规定自动换行的处理方法
| keep-all | 只能在半角空格或连字符处换行。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
position:fixed;_position:absolute;
position:absolute;top:50%;left:50%;width:530px;height:470px;margin:-235px 0 0 -265px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000)}:root .prizeguide-cont{filter:none background:rgba(0,0,0,0.6)}/*IE9以上及谷歌火狐半透明*/ .sls_top_body{background-color:rgba(13,83,188,0.8);}/*IE6、7、8半透明*/ @media \0screen\,screen\9{.sls_top_body{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC0d53bc, endColorstr=#CC0d53bc);}}
它做半透明兼容的，背景半透明内容不透明 http://www.imooc.com/article/13667border-color:#666 transparent transparent;_border-color:#666 #fff #fff;overflow:hidden;zoom:1clear:both;display:block;text-align:center;zoom:1-webkit-transition:.3s ease-in;-moz-transition:.3s ease-in;-o-transition:.3s ease-in;transition:.3s ease-in;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(0);transform:rotate(180deg)opacity:.20;filter:alpha(opacity="20")span{float:right;display:inline;margin:4px 12px 0 0;width:59px;height:21px;line-height:21px;text-align:center;border-radius:3px}table {
- font-size: inherit;
- font: 100%;
- border-collapse: collapse;
- border-spacing: 0;