css-lego

A light-weight css framework

how to use

import "css-lego";

box

此类中涉及盒模型相关类名

|selector | css | desc | |---|---| --- | |.border-box|box-sizing: border-box| |.content-box|box-sizing: content-box| |.d-b|display:block| |.flex|display:flex| |.flex .flex-row|flex-direction:row| |.flex .flex-column|flex-direction:column| |.flex .flex-align-center|align-items:center| |.flex .flex-justify-center|justify-content:center| |.flex .flex-center|align-items:center;justify-content:center;| |.flex .flex-fill|flex:1| |.pos-r|position:relative| |.pos-a|position:absolute| |.pos-f|position:fixed| |.pos-horizon-center|left:50%;transform:translateX(-50%)| |.pos-vertical-center|top:50%;transform:translateY(-50%)| |.pos-center|top:50%;left:50%;transform:translate(-50%,-50%)| |.pos-fill|top:0;right:0;left:0;bottom:0| |.f-l|float:left| |.f-r|float:right| |.o-hidden|overflow:hidden| |.w-100p|width:100%| |.h-100p|height:100%| |.p-t-5|padding-top:5px| |.p-b-5|padding-bottom:5px| |.p-l-5|padding-left:5px| |.p-r-5|padding-right:5px| |.p-a-5|padding:5px| |.m-t-5|margin-top:5px| |.m-b-5|margin-bottom:5px| |.m-l-5|margin-left:5px| |.m-r-5|margin-right:5px| |.m-a-5|margin:5px| |.p-t-10|padding-top:10px| |.p-b-10|padding-bottom:10px| |.p-l-10|padding-left:10px| |.p-r-10|padding-right:10px| |.p-a-10|padding:10px| |.m-t-10|margin-top:10px| |.m-b-10|margin-bottom:10px| |.m-l-10|margin-left:10px| |.m-r-10|margin-right:10px| |.m-a-10|margin:10px| |.p-t-15|padding-top:15px| |.p-b-15|padding-bottom:15px| |.p-l-15|padding-left:15px| |.p-r-15|padding-right:15px| |.p-a-15|padding:15px| |.m-t-15|margin-top:15px| |.m-b-15|margin-bottom:15px| |.m-l-15|margin-left:15px| |.m-r-15|margin-right:15px| |.m-a-15|margin:15px| |.p-t-20|padding-top:20px| |.p-b-20|padding-bottom:20px| |.p-l-20|padding-left:20px| |.p-r-20|padding-right:20px| |.p-a-20|padding:20px| |.m-t-20|margin-top:20px| |.m-b-20|margin-bottom:20px| |.m-l-20|margin-left:20px| |.m-r-20|margin-right:20px| |.m-a-20|margin:20px| |.p-t-25|padding-top:25px| |.p-b-25|padding-bottom:25px| |.p-l-25|padding-left:25px| |.p-r-25|padding-right:25px| |.p-a-25|padding:25px| |.m-t-25|margin-top:25px| |.m-b-25|margin-bottom:25px| |.m-l-25|margin-left:25px| |.m-r-25|margin-right:25px| |.m-a-25|margin:25px| |.p-t-30|padding-top:30px| |.p-b-30|padding-bottom:30px| |.p-l-30|padding-left:30px| |.p-r-30|padding-right:30px| |.p-a-30|padding:30px| |.m-t-30|margin-top:30px| |.m-b-30|margin-bottom:30px| |.m-l-30|margin-left:30px| |.m-r-30|margin-right:30px| |.m-a-30|margin:30px| |.bg-no-repeat|background-repeat:no-repeat| |.bg-center|background-position:50%| |.bg-cover|background-size:cover| |.bg-contain|background-size:contain| |.bg-fill|background-size:100%| |.fit-contain|-o-object-fit:contain;object-fit:contain| |.fit-cover|-o-object-fit:cover;object-fit:cover| |.fit-fill|-o-object-fit:fill;object-fit:fill|

text

文字相关类名

|selector|css|desc| |---|---|---| |.t-c | text-align:center|| |.line-1| | one line and overflow ellipsis| |.line-2| | two lines and overflow ellipsis| |.line-3| | three lines and overflow ellipsis|