css收集整理

整理一些自己平时用的比较多的或者巧技方便以后使用，不断整理更新，笔记都是做给自己看的，略潦草……

/** * Created by yangyurong on 2016.12.06 * description:整理项目中常用的样式*/@charset "utf-8";/* reset start */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset, lengend, button, input, textarea,th, td {margin: 0;padding: 0;}body,button, input, select, textarea {font: 14px/1 "Microsoft Yahei UI", "Microsoft Yahei","\5fae\8f6f\96c5\9ed1",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}h1 { font-size: 18px;}h2 { font-size: 16px; }h3 { font-size: 14px; }h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; }code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; }small { font-size: 12px; }ul, ol { list-style: none; }a { text-decoration: none; cursor: pointer;}a:hover { text-decoration: underline; }abbr[title], acronym[title] {border-bottom: 1px dotted;cursor: help;}q:before, q:after { content: ''; }legend { color: #000; }fieldset, img { border: none; }button, input, select, textarea {font-size: 100%;}table {border-collapse: collapse;border-spacing: 0;}hr {border: none;height: 1px;}i{font-style: normal;}/*自定义字体*/@font-face {    font-family: 'HelveticaNeue-BoldCond';    src: url('../font/HelveticaNeue-BoldCond.eot');    src: url('../font/HelveticaNeue-BoldCond.woff2') format('woff2'),    url('../font/HelveticaNeue-BoldCond.woff') format('woff'),    url('../font/HelveticaNeue-BoldCond.ttf') format('truetype'),    url('../font/HelveticaNeue-BoldCond.svg#HelveticaNeue-BoldCond') format('svg'),    url('../font/HelveticaNeue-BoldCond.eot?#iefix') format('embedded-opentype');    font-weight: normal;    font-style: normal;}.class-name{    font-family: "HelveticaNeue-BoldCond","Microsoft Yahei","黑体";}/*浮动*/.lf{    float: left;}.rf{    float: right;}.clearfix{    zoom: 1;}.clearfix:after{    display: block;    content: "";    clear: both;}/*设置页面文本选中的背景颜色*/::selection{//用之前先caniuse一下，看看是否满足你的兼容需求    background: #00ada7;    color:#ffffff;}/*单行文本截断省略*/.overflow{    text-overflow: ellipsis;    overflow: hidden;    white-space: nowrap;}/*边框*/.border-t{    border-top: 1px solid #ddd;}.border-b{    border-top: 1px solid #ddd;}.border-l{    border-top: 1px solid #ddd;}.border-r{    border-top: 1px solid #ddd;}/*透明效果*/.opacity{    opacity: 0.6;/*IE9以上*/    filter: alpha(opacity=60);}/*雪碧图icon*/.icon{    display: inline-block;    width: 16px;    height: 16px;    background-image: url(img/icon-1x.png);    background-image: -webkit-image-set(url(img/icon-1x.png) 1x, url(img/icon-2x.png) 2x);/*ratio屏显示两倍图标*/    background-size: 100% 100%;    background-repeat: no-repeat;    overflow: hidden;}.icon-one{    background-position: 0 0;}/*icon垂直居中*/.icon-vertical-middle{    position: relative;/*使用vertical-align: middle;可能会有一个像素的误差*/    bottom: 1px;    display: inline-block;    width: 16px;    height: 16px;    vertical-align: middle;}/*行内元素之间消除间距*/.parent{    font-size: 0;    word-spacing:-1px;}.children{    font-size: 12px;    letter-spacing: normal;/* 设置字母、字间距为0 */    word-spacing: normal; /* 设置单词、字段间距为0 */}/*水平垂直居中*///method 1 相对定位.parent{    position: relative;    width: 400px;    height: 400px;}.children{    position: absolute;    top: 50%;    left: 50%;    margin-top: -100px;/*负的自身高度的一半*/    margin-left: -100px;/*负的自身宽度的一半*/    width: 200px;    height: 200px;}//method 2.parent{    position: relative;    width: 400px;    height: 400px;}.children{    position: absolute;    width: 200px;    height: 200px;    margin: auto;    top: 0;    bottom: 0;    left: 0;    right: 0;}/*不固定高度水平垂直居中*///method 1 适用于手机.box{    position: fixed;    top: 50%;    left: 50%;    -webkit-transform: translate3d(-50%,-50%,0);    transform: translate3d(-50%,-50%,0);}//method 2 ie7及其以下浏览器不支持display: table;.parent{    display: table;    text-align: center;}.children{    display: table-cell;    vertical-align: middle;}//method 3 只针对宽高小于parent的图片.parent{    position: relative;    width: 400px;    height: 400px;}.children-img{    position: absolute;    margin: auto;    top: 0;    bottom: 0;    left: 0;    right: 0;}//method 4 图片(宽高可大于parent).parent{    position: relative;    width: 400px;    height: 400px;    overflow: hidden;}.children-img{    position: absolute;    margin: auto;    top: -9999px;    bottom: -9999px;    left: -9999px;    right: -9999px;}/*页面内容不足以铺满整个屏幕，footer居底显示*///method 1/*<div class="page">      主要页面  </div>  <footer>底部</footer>*/html,body{      height: 100%;      margin: 0;    padding: 0;}  .page{     box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,ie7以下包括ie7不支持这个属性*/      min-height: 100%;    padding-bottom: 300px;}  footer{    height: 300px;    margin-top: -300px;    z-index: 2px;      opacity: 0.5;}//method 2/*<div class="page-container">      <div class="page-main">          主要页面       </div>      <footer>底部</footer>  </div>*/ html,body{    height: 100%;    margin: 0;    padding: 0;}.page-container{     position: relative;    min-height: 100%;}.page-main{    padding-bottom: 300px; }footer{     position: absolute;    left: 0;    bottom: 0;      height: 300px;  }/*自定义动画*//**适用于手机*心跳效果*/.animated{    -webkit-animation-duration:1s;    animation-duration:1s;    -webkit-animation-fill-mode:both;    animation-fill-mode:both}@-webkit-keyframes pulse {    0% {        -webkit-transform:scale(1)    }    50% {        -webkit-transform:scale(1.5)    }    95% {        -webkit-transform:scale(0.9)    }    100% {        -webkit-transform:scale(1)    }}@keyframes pulse {    0% {        transform:scale(1)    }    50% {        transform:scale(1.5)    }    95% {        transform:scale(0.9)    }    100% {        transform:scale(1)    }}.pulse {    -webkit-animation-name:pulse;    animation-name:pulse;}