0.0.22-a • Published 3 years ago
css-lego v0.0.22-a
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 |