关于h5-app的一些css样式

总结一些项目中遇到的css样式，供以后查阅，持续更新。

1.控制文本以指定行数显示，多余部分以省略号代替。

.singleline{
    display: -webkit-box;       /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/
    -webkit-box-orient;         /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
    text-overflow: ellipsis;    /*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本*/
    overflow : hidden;
    -webkit-line-clamp: 1;      /*控制行数
    -webkit-box-orient: vertical;
}

2.在图标右上角显示数量提醒，类似微信未读消息。

.redpoint{ 
    height: 15px;width: 15px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 0.1em;
    color: #FFFFD0; /*调整数字的大小*/
    background: red;
    position: relative;
    top: -38px;    /*通过控制与上右的距离实现在右上角*/
    right: -10px;
}

3.圆角卡片(以主背景为白色，圆角卡片为灰色为例)

.card-back{
    background-color:#f0f0f0;
    border-radius:10px;     /*控制圆角的弧度*/
}

4.所有元素共用样式(以*作为标识)

*{
    font-family:Arial;      /*所有元素共用该字体样式*/
}

5.使元素特立独行，不使用所有元素的共用样式(例如大家都是红色的，只有我是蓝色的)

*{
    color:red;
}
.mycss{
    colorable !important;   /*!important的优先级最高*/
}