各个知识点

1、清除浮动
.clearfix:after {content: ".";clear: both;display: block;height: 0;overflow: hidden;visibility: hidden;}
.clearfix{clear:both;z-index:1;}

2、更新的清除浮动
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }


3、跨浏览器的透明度
.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 */
}


4、.一般媒体查询
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
@media only screen and (min-width : 321px) {}
@media only screen and (max-width : 320px) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
@media only screen and (min-width : 1224px) {}
@media only screen and (min-width : 1824px) {}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {}


5、自定义文本选择。 一些新式的浏览器会允许你定义页面中的高亮颜色
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }


6、a标签
  表示所有状态下的连接 如 a{color:red} 
① a:link： 未访问链接 ,如 a:link {color:blue} 
② a:visited： 已访问链接 ,如 a:visited{color:blue} 
③ a:active： 激活时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue} 
④ a:hover： 鼠标移到链接上时 ,如 a:hover {color:blue} 
一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。 
前三者分别对应body元素的link、vlink、alink这三个属性。 
四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。
另外，a:active不能设置有无下划线（总是有的）。 
对超链接下划线设置 使用代码"text-decoration"
语法： 
text-decoration : none || underline || blink || overline || line-through 

text-decoration参数： 
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线


7、垂直居中内容
.container { min-height: 6.5em; display: table-cell; vertical-align: middle;}


8、@font-face模版
@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* Modern Browsers */
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}


9、段落首字母
p:first-letter{
    display: block;
    margin: 5px 0 0 5px;
    float: left;
    color: #ff3366;
    font-size: 5.4em;
    font-family: Georgia, Times New Roman, serif;
}


10、跨浏览器的最小高度
#container {
    min-height: 550px;
    height: auto !important;
    height: 550px;
}


11、基于文件类型的链接样式
/* external links */
a[href^="http://"] {
    padding-right: 13px;
    background: url('external.gif') no-repeat center right;
}
/* emails */
a[href^="mailto:"] {
    padding-right: 20px;
    background: url('email.png') no-repeat center right;
}
/* pdfs */
a[href$=".pdf"] {
    padding-right: 18px;
    background: url('acrobat.png') no-repeat center right;
}


12、强制可点击条目上显示手型光标
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
    cursor: pointer;
}


13、网页顶端阴影
body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
     100%;
    height: 10px;

    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}


14、默认的 H1-H5 题头
h1,h2,h3,h4,h5{  color: #005a9c;}
h1{font-size: 2.6em;line-height: 2.45em;}
h2{font-size: 2.1em;line-height: 1.9em;}
h3{font-size: 1.8em;line-height: 1.65em;}
h4{font-size: 1.65em;line-height: 1.4em;}
h5{font-size: 1.4em; line-height: 1.25em;}


15、 禁用移动Webkit高亮
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


16、压缩的 CSS 字体属性
p {
  font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
}

17、超出宽度内容省略号

<DIV STYLE=" 120px; height: 50px; border: 1px solid blue; 
            overflow: hidden; text-overflow:ellipsis"> 
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR> 
</DIV>