appcan之ui-box.css

最新推荐文章于 2024-11-22 12:12:12 发布

LSONGCHEN

最新推荐文章于 2024-11-22 12:12:12 发布

阅读量435

点赞数

本文深入探讨了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;
}