常用汇总css

父元素设置定位为相对定位

.main {
        position: relative;
    }

子元素才可以设置为绝对定位

    .nav {
        position: absolute;
        top: 10px;
        left: 150px;
    }

单行文本省略号

.ellipsis-row1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文本省略号

.ellipsis-row3 {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: -o-ellipsis-lastline;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

超出...

.text {
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

弹性盒子布局

display: flex;  flex布局
justify-content: center;  横向居中  flex-start   flex-end
align-items: center;      垂直居中  flex-start   flex-end

首行缩进两个字 text-indent:2em

媒体查询 media

 <style>
  .main{width:980px;background-color: #ccc;margin:0 auto; text-align:center; overflow:hidden}
  @media screen and (min-width: 320px) and (max-width: 480px) {
  .main{width:80%;  background-color: #ccc;margin:0 auto; text-align:center; overflow:hidden}
  }
</style>

边框加阴影

box-shadow: 2px 2px  3px #888888;
background: #FFFFFF;
    border: 1px solid #E6E2E2;
    box-shadow: 0 1px 4px 0 #E6E2E2;
    border-radius: 4px;
    margin-bottom: 32px;
}


-flex布局 display:flex

.mydiv {
display: flex;
justify-content: space-between;
align-items: center;
}

.mydiv #aa {
    width: 49%;
    height: 180px;
    background-color: #fff;
}

<div class="mydiv">
<div id="aa">sdsd</div>
<div id="aa">sdsd</div>
</div>

wap版样式+清除手机版点击有阴影效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
img { max-width: 100%;}
a {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
} </style>
<img src="xx.jpg" /></div>