块布局Box

支持10%-100%区间的配置,每5%为一个间隔,10%、15%、20%依此类推至100%(不包括95%),其中支持特殊宽度.box33、.box66

类名 权重 小屏幕 (0-750px) 中等屏幕 (0-1200px) 大屏幕 (>1200px)
.box 默认 保持设定值 保持设定值 保持设定值
.box-m 高于.box 触发设定值 触发设定值 不触发
.box-s 高于.box及.box-m 触发设定值 不触发 不触发
.box10
.box10
.box10
.box10
.box10
.box10
.box10
.box10
.box10
.box10
.box33
.box33
.box33
.box50
.box50
.box33
.box66
.box25
.box75
.box10
.box90
.box100
<div class="box100">Box</div>

响应式布局Responsive layout

通过预定义的class="box-m"、class="box-s"来对中、小屏幕作布局调整
例:添加class="box50 box-s100",即块元素默认为50%宽度,视窗像素小于750px则转换为100%宽度

<div class="box50 box-s100">Box</div>
<div class="box50 box-s100">Box</div>

class="box-m"、class="box-s"可以同时叠加,在不同视窗大小时按权重执行设定值

<div class="box50 box-m75 box-s100">Box</div>
<div class="box50 box-m75 box-s100">Box</div>

偏移Offset

向左填充margin-left,5%、10%、15%以此类推至90%,其中支持特殊宽度.offset33、.offset66

类名 权重 小屏幕 (0-750px) 中等屏幕 (0-1200px) 大屏幕 (>1200px)
.offset 默认 保持设定值 保持设定值 保持设定值
.offset-m 高于.offset 触发设定值 触发设定值 不触发
.offset-s 高于.offset及.offset-m 触发设定值 不触发 不触发
.box75 .offset25
.box66 .offset33
.box35 .offset15
.box40 .offset10
<div class="box50 offset50">Box Offset</div>

响应式偏移Responsive offset

通过预定义的class="offset-m"、class="offset-s"来对中、小屏幕作布局调整
例:添加class="offset25 offset-s0",即块元素默认为25%偏移宽度,视窗像素小于750px则转换为0%偏移宽度

.offset-m.offset-s类名支持数值0,即.offset-m0.offset-s0

<div class="box75 offset25 offset-s0">Box Offset</div>

class="offset-m"、class="offset-s"可以同时叠加,在不同视窗大小时按权重执行设定值

<div class="box75 box-m50 offset25 offset-m50 offset-s0">Box Offset</div>

嵌套Nesting

可以不断向元素内嵌套块元素

.box35
.box50
.box50
.box65
.box50
.box50

浮动Float

添加class="fr"使块元素向右浮动,添加class="fc"使块元素居中浮动

.box60 .fr 向右浮动
.box60 .fc 居中

清除浮动Clear float

若要换行,对于高度不统一的块元素利用class="clear"来清除浮动

.box40
.box60
.box35 .clear

间距Padding

添加class="plr"使块元素填充左右内间距padding-left:0.75rem;padding-right:0.75rem

.box33 .plr
.box33 .plr
.box33 .plr
.box50 .plr
.box50 .plr