css样式、calss类名常用简写和规范

Devil枫

于 2022-11-12 16:49:24 发布

阅读量249

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_43578304/article/details/127822283

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文提供了一系列CSS样式和布局的示例，包括字体大小`.text-*`、内边距`.p-*`、外边距`.m-*`以及边框圆角`.rounded-*`的详细定义。此外，还涉及到了透明度`.opacity-*`的设置。这些规范旨在为前端开发提供一致性和易读性的样式指导。

摘要由CSDN通过智能技术生成

话不多说，直接贴出部分规范样例。

示例

.text-1{font-size: 1px;}
 .text-2{font-size: 2px;}
 .text-3{font-size: 3px;}
 .text-4{font-size: 4px;}
 .text-5{font-size: 5px;}
 .text-6{font-size: 6px;}
 .text-7{font-size: 7px;}
 .text-8{font-size: 8px;}
 .text-9{font-size: 9px;}
/* padding */

.p-1{padding: 1px;}
.p-2{padding: 2px;}
.p-3{padding: 3px;}
.p-4{padding: 4px;}
.p-5{padding: 5px;}
.p-6{padding: 6px;}
.p-7{padding: 7px;}
.p-8{padding: 8px;}
.p-9{padding: 9px;}
.pl-1{padding-left: 1px;}
.pl-2{padding-left: 2px;}
.pl-3{padding-left: 3px;}
.pl-4{padding-left: 4px;}
.pl-5{padding-left: 5px;}
.pl-6{padding-left: 6px;}
.pl-7{padding-left: 7px;}
.pl-8{padding-left: 8px;}
.pr-1{padding-right: 1px;}
.pr-2{padding-right: 2px;}
.pr-3{padding-right: 3px;}
.pr-4{padding-right: 4px;}
.pr-5{padding-right: 5px;}
.pr-6{padding-right: 6px;}
.px-1{padding-left: 1px;padding-right: 1px;}
.px-2{padding-left: 2px;padding-right: 2px;}
.px-3{padding-left: 3px;padding-right: 3px;}
.px-4{padding-left: 4px;padding-right: 4px;}
.px-5{padding-left: 5px;padding-right: 5px;}
.px-6{padding-left: 6px;padding-right: 6px;}
.px-7{padding-left: 7px;padding-right: 7px;}
/*margin*/

.m-1{margin: 1px;}
.m-2{margin: 2px;}
.m-3{margin: 3px;}
.m-4{margin: 4px;}
.m-5{margin: 5px;}
.m-6{margin: 6px;}
.m-7{margin: 7px;}
.m-8{margin: 8px;}
.mx-1{margin-left: 1px;margin-right: 1px;}
.mx-2{margin-left: 2px;margin-right: 2px;}
.mx-3{margin-left: 3px;margin-right: 3px;}
.mx-4{margin-left: 4px;margin-right: 4px;}
.mx-5{margin-left: 5px;margin-right: 5px;}
.mx-6{margin-left: 6px;margin-right: 6px;}
.mx-7{margin-left: 7px;margin-right: 7px;}
.mx-8{margin-left: 8px;margin-right: 8px;}
.mx-9{margin-left: 9px;margin-right: 9px;}
.rounded-94{border-radius: 94px;}
.rounded-95{border-radius: 95px;}
.rounded-96{border-radius: 96px;}
.rounded-97{border-radius: 97px;}
.rounded-98{border-radius: 98px;}
.rounded-99{border-radius: 99px;}
.rounded-100{border-radius: 100px;}

.opacity-0 {opacity: 0; }
.opacity-5 {opacity: 0.05; }
.opacity-10 {opacity: 0.1; }