微信小程序公共样式

本文主要是介绍微信小程序公共样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

/* create 2021-10-30 author lin*/

page{
    font-family: PingFang SC;
}

/* flex布局 */
.dis-flex {
    display: flex;
}

.flex-box {
    flex: 1;
}

.flex-x-center {
    justify-content: center;
}

.flex-x-between {
    justify-content: space-between;
}

.flex-x-around {
    justify-content: space-around;
}

.flex-x-end {
    justify-content: flex-end;
}

.flex-y-center {
    align-items: center;
}

.flex-y-end {
    align-items: flex-end;
}
.flex-wrap{
    flex-wrap: wrap;
}
/* 文字溢出隐藏 */
.onelist-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
}

.twolist-hidden {
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.threelist-hidden {
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
/* 图片填充 */
.fill-img-wh image{
    width: 100%;
    height: 100%;
}
.fill-img-w image{
    width: 100%;
}
/* 背景图裁剪 */
.bg-center {
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* --------end-------- */


/* 无样式button (用于伪submit) */
.btn-normal {
    display: block;
    margin: 0;
    padding: 0;
    line-height: normal;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-size: unset;
    text-align: unset;
    overflow: visible;
    color: inherit;
}

.btn-normal:after {
    border: none;
}

.btn-normal.button-hover {
    color: inherit;
}

/* 默认样式取消 */
button::after {
    border: none;
}

input {
    outline: none;
    border: none;
    list-style: none;
}
/* 刘海 底部条形返回 安全距离 */
.safety-box{
    padding-bottom: env(safe-area-inset-bottom);
}

这篇关于微信小程序公共样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！