关于css

--!Importent

　　关于伪类css优先级问题，.hover和.class的权重相同，比如 a.hour和a.class1他俩的权值相等

1）css渐变

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#339999,endColorStr=#66CCCC); /*IE*/
background: -webkit-linear-gradient(left, #339999 , #66CCCC); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #339999, #66CCCC); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #339999, #66CCCC); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #339999 , #66CCCC); /* 标准的语法（必须放在最后） */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#339999', endColorstr='#66CCCC'); /*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#339999', endColorstr='#66CCCC')"; /* IE8 */

2）css旋转

 　　　　　　　　-ms-transform:rotate(180deg); /* IE 9 */                               /*旋转*/
             -moz-transform:rotate(180deg); /* Firefox */
             -webkit-transform:rotate(180deg); /* Safari and Chrome */
             -o-transform:rotate(180deg); /* Opera */

   document包含所有元素包括绝对定位的元素，而document.body 指body标签的内容，不包含绝对定位的元素

3）css 倒三角符号

.caret {
                        display: inline-block;
                         0;
                        height: 0;
                        margin-left: 2px;
                        vertical-align: middle;
                        border-bottom: 10px solid;
                        border-right: 10px solid transparent;
                        border-left: 10px solid transparent;
                        padding:0;margin:0;
                        position:relative;
                        top:7px
                     }

 4）a标签获取不到焦点，给a标签加个tabindex属性之后可以获取到焦点

 5）谷歌内核下滚动条样式

::-webkit-scrollbar{7px;height:7px;} /*谷歌浏览器的滚动条样式*/
::-webkit-scrollbar-track{background-color:#fbfafa;}
::-webkit-scrollbar-track:hover { background-color:#d5e5ee;}
::-webkit-scrollbar-thumb{background-color:#6699CC;box-shadow:0 0 2px #6699CC;-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; box-shadow:0 0 10px #ccc}
/*::-webkit-scrollbar-thumb:hover {background-color:#EEEEEE}*/
::-webkit-scrollbar-thumb:active {background-color:#669999}

 6) Img的vertical-align属性；

　W3C：　该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。　　

 7）CSS3 圆角

 　　-moz-border-radius:4px; 
    -webkit-border-radius:4px;
     border-radius:4px; 

8）CSS3 阴影

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;

9）CSS3 百分比长度的加减

calc(100% - 8px);

10）css  background

background: url("") no-repeat 0px 3px;

no-repeat代表图像不重复，后面的0 3 代表分别图像的定位位置（left和top），可以是百分比 或（center left right）

10）清除浮动

#box:after { display: table; content: "";  0; clear: both; }

　该句代码可以理解为id为box的盒子内之后添加一个元素，要声明该元素的content属性，并且用clear：both清除浮动。

blockquote:before {
	content: open-quote;
	position: absolute;
	z-index: -1;
	color: #DDD;
	font-size: 120px;
	font-family: serif;
	font-weight: bolder;
}

在blockquote模拟添加一个自定义背景，此处是一个‘“’引号，

 11)继承父元素的属性

inherit

 12）文字的字符间距属性

letter-spacing

 13）mate标签的 user-scalable=no 属性。网页不能缩放，但可以解决手机端浏览器迟钝的问题

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">