appcan之ui-box.css

本文深入探讨了CSS布局的各种技巧及应用场景,包括不同显示模式、定位方式、尺寸控制、对齐方式等关键特性,并通过具体样式类展示了如何实现图片的多种背景效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

.ub
{
    display: -webkit-box !important;
    display: box !important;
    position:relative;
}

.ub-rev
{
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

.ub-fh
{
    width:100%;
}

.ub-fv
{
    height:100%;
}

.ub-con
{
    position:absolute;
    width:100%;
    height:100%;
}

.ub-ac
{
    -webkit-box-align:center;
    box-align:center;
}
.ub-ae
{
    -webkit-box-align:end;
    box-align:end;
}

.ub-pc
{
    -webkit-box-pack:center;
    box-pack:center;
}
.ub-pe
{
    -webkit-box-pack:end;
    box-pack:end;
}
.ub-pj
{
    -webkit-box-pack:justify;
    box-pack:justify;
}

.ub-ver
{
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

.ub-f1
{
    position:relative;
    -webkit-box-flex: 1;
    box-flex: 1;
}

.ub-f2
{
    position:relative;
    -webkit-box-flex: 2;
    box-flex: 2;
}

.ub-f3
{
    position:relative;
    -webkit-box-flex: 3;
    box-flex: 3;
}

.ub-f4
{
    position:relative;
    -webkit-box-flex: 4;
    box-flex: 4;
}

.ub-img
{
    -webkit-background-size:contain;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

.ub-img1
{    
    -webkit-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
.ub-img2
{
    background-repeat:repeat-x;
    background-size:auto 100%
}
.ub-img3
{
    background-repeat:repeat-y;
    background-size:100% auto
}

.ub-img4
{
    -webkit-background-size:100% auto;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:center;
}
.ub-img5
{
    -webkit-background-size:auto 100%;
    background-size:auto 100%;
    background-repeat:no-repeat;
    background-position:center;
}

.ub-img6
{
    background-repeat:no-repeat;
    background-position:center;
}
.ub-img7
{
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值