/* flex */
.flex{
    display: flex;
}
.f1{
    flex:1
}
.flex-center{
    align-items: center;
    justify-content: center;
}
.ai-center{
    align-items: center;
}
.ai-start{
    align-items: flex-start;
}
.ai-end{
    align-items: flex-end;
}
.jc-center{
    justify-content: center;
}
.js-start{
    justify-content: start;
}
.js-end{
    justify-content: start;
}
/* font center  */
.font-ct{
    text-align: center;
}
/* dom */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
/* margin and padding */
.m-0 {
    margin: 0 !important;
  }
  
  .mt-0,
  .my-0 {
    margin-top: 0 !important;
  }
  
  .mr-0,
  .mx-0 {
    margin-right: 0 !important;
  }
  
  .mb-0,
  .my-0 {
    margin-bottom: 0 !important;
  }
  
  .ml-0,
  .mx-0 {
    margin-left: 0 !important;
  }
  
  .m-1 {
    margin: 0.25rem !important;
  }
  
  .mt-1,
  .my-1 {
    margin-top: 0.25rem !important;
  }
  
  .mr-1,
  .mx-1 {
    margin-right: 0.25rem !important;
  }
  
  .mb-1,
  .my-1 {
    margin-bottom: 0.25rem !important;
  }
  
  .ml-1,
  .mx-1 {
    margin-left: 0.25rem !important;
  }
  
  .m-2 {
    margin: 0.5rem !important;
  }
  
  .mt-2,
  .my-2 {
    margin-top: 0.5rem !important;
  }
  
  .mr-2,
  .mx-2 {
    margin-right: 0.5rem !important;
  }
  
  .mb-2,
  .my-2 {
    margin-bottom: 0.5rem !important;
  }
  
  .ml-2,
  .mx-2 {
    margin-left: 0.5rem !important;
  }
  
  .m-3 {
    margin: 1rem !important;
  }
  
  .mt-3,
  .my-3 {
    margin-top: 1rem !important;
  }
  
  .mr-3,
  .mx-3 {
    margin-right: 1rem !important;
  }
  
  .mb-3,
  .my-3 {
    margin-bottom: 1rem !important;
  }
  
  .ml-3,
  .mx-3 {
    margin-left: 1rem !important;
  }
  
  .m-4 {
    margin: 1.5rem !important;
  }
  
  .mt-4,
  .my-4 {
    margin-top: 1.5rem !important;
  }
  
  .mr-4,
  .mx-4 {
    margin-right: 1.5rem !important;
  }
  
  .mb-4,
  .my-4 {
    margin-bottom: 1.5rem !important;
  }
  
  .ml-4,
  .mx-4 {
    margin-left: 1.5rem !important;
  }
  
  .m-5 {
    margin: 3rem !important;
  }
  
  .mt-5,
  .my-5 {
    margin-top: 3rem !important;
  }
  
  .mr-5,
  .mx-5 {
    margin-right: 3rem !important;
  }
  
  .mb-5,
  .my-5 {
    margin-bottom: 3rem !important;
  }
  
  .ml-5,
  .mx-5 {
    margin-left: 3rem !important;
  }
  
  .p-0 {
    padding: 0 !important;
  }
  
  .pt-0,
  .py-0 {
    padding-top: 0 !important;
  }
  
  .pr-0,
  .px-0 {
    padding-right: 0 !important;
  }
  
  .pb-0,
  .py-0 {
    padding-bottom: 0 !important;
  }
  
  .pl-0,
  .px-0 {
    padding-left: 0 !important;
  }
  
  .p-1 {
    padding: 0.25rem !important;
  }
  
  .pt-1,
  .py-1 {
    padding-top: 0.25rem !important;
  }
  
  .pr-1,
  .px-1 {
    padding-right: 0.25rem !important;
  }
  
  .pb-1,
  .py-1 {
    padding-bottom: 0.25rem !important;
  }
  
  .pl-1,
  .px-1 {
    padding-left: 0.25rem !important;
  }
  
  .p-2 {
    padding: 0.5rem !important;
  }
  
  .pt-2,
  .py-2 {
    padding-top: 0.5rem !important;
  }
  
  .pr-2,
  .px-2 {
    padding-right: 0.5rem !important;
  }
  
  .pb-2,
  .py-2 {
    padding-bottom: 0.5rem !important;
  }
  
  .pl-2,
  .px-2 {
    padding-left: 0.5rem !important;
  }
  
  .p-3 {
    padding: 1rem !important;
  }
  
  .pt-3,
  .py-3 {
    padding-top: 1rem !important;
  }
  
  .pr-3,
  .px-3 {
    padding-right: 1rem !important;
  }
  
  .pb-3,
  .py-3 {
    padding-bottom: 1rem !important;
  }
  
  .pl-3,
  .px-3 {
    padding-left: 1rem !important;
  }
  
  .p-4 {
    padding: 1.5rem !important;
  }
  
  .pt-4,
  .py-4 {
    padding-top: 1.5rem !important;
  }
  
  .pr-4,
  .px-4 {
    padding-right: 1.5rem !important;
  }
  
  .pb-4,
  .py-4 {
    padding-bottom: 1.5rem !important;
  }
  
  .pl-4,
  .px-4 {
    padding-left: 1.5rem !important;
  }
  
  .p-5 {
    padding: 3rem !important;
  }
  
  .pt-5,
  .py-5 {
    padding-top: 3rem !important;
  }
  
  .pr-5,
  .px-5 {
    padding-right: 3rem !important;
  }
  
  .pb-5,
  .py-5 {
    padding-bottom: 3rem !important;
  }
  
  .pl-5,
  .px-5 {
    padding-left: 3rem !important;
  }
  /* --- end --- margin and padding  */

CSS - 工具类 tool.css的更多相关文章

  1. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  2. 转贴：CSS伪类与CSS伪元素的区别及由来具体说明

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  3. css工具类封装

    温馨提示:一下css封装,建议按需使用,否则会造成很大的代码冗余,且很多样式会造成不符合预期的效果,建议合理使用 <a href="https://meyerweb.com/eric/ ...

  4. less循环写css工具类

    //margin-right=================.mr(100); .mr(@n, @i: 1) when (@i =< @n) { .mr-@{i} { margin-right ...

  5. css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child

    1. 链接伪类: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&qu ...

  6. CSS：CSS 伪类(Pseudo-classes)

    ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...

  7. 17款提高编码效率的CSS工具

    摘要:作为WEB前端开发人员,你的工作可能很大一部分都在编写CSS代码,为了提高前端开发人员编写CSS代码的效率,编程文库从 网上搜集了17款可以提高你CSS代码效率的CSS工具,它们可以帮助你快速生 ...

  8. HTML转义字符 Unicode和CSS伪类介绍

    CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...

  9. 2014 年 20 款最好的 CSS 工具

    说到 WEB 设计,不得不介绍介绍 CSS 工具,CSS 工具在这里面扮演很重要的角色,可以简化无数开发者和设计师的工作,写出更好的 CSS 代码. 而网上有非常多的 CSS 工具,帮助设计师和开发者 ...

  10. Bootstrap - 全局css样式类

    状态类 通过这些状态类可以为行或单元格设置颜色. .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning ...

随机推荐

  1. Collection和Map的区别

    Collection接口,包含list和set子接口Collection和Map接口之间的主要区别在于:Collection中存储了一组对象,而Map存储关键字/值对.在Map对象中,每一个关键字最多 ...

  2. Python——第二章：单引号（'）、双引号（"）、花括号 {}的用法及注意事项

    在Python中,字符串可以用单引号(')或双引号(")括起来,它们在用法上没有本质区别.你可以根据个人偏好来选择使用单引号或双引号来创建字符串. 例如: 使用单引号括起的字符串: prin ...

  3. 如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana｜Part 2

    在 Part 1 中,我们一起了解了什么是 Prometheus 和 Grafana,以及使用这些工具的前提条件和优势.在本部分,将继续带您学习如何安装 Helm 以及如何使用 Prometheus ...

  4. 云图说丨初识华为云OrgID：轻松实现统一帐号、统一授权

    本文分享自华为云社区<[云图说]第282期 初识华为云OrgID:轻松实现统一帐号.统一授权>,作者: 阅识风云 . 组织成员帐号 OrgID是面向企业提供组织管理.企业成员帐号管理以及S ...

  5. 网络ping不通，试试这8招

    摘要:网络ping不通,该怎么办?本文教你8个大招,轻松找到问题根源. 本文分享自华为云社区<网络ping不通,该怎么办?>,作者:wljslmz. 如下图,PC(192.168.10.1 ...

  6. 3个轻量级物联网新品实验，带您深度体验IoT开发

    摘要:一键创建实验环境,开发者通过实验手册指导,快速体验华为云IoT服务,在云端即可实现云服务的实践.调测和验证等开发流程. 本文分享自华为云社区<物联网云上实验上新,带您深度体验华为云IoT服 ...

  7. 用 docker 部署 folkmq 消息中间件

    docker run -p 18602:18602 -p 8602:8602 noearorg/folkmq-server:1.0.19

  8. Mac 开发 ｜ IDEA 设置 Mybatis 的XML SQL 语句提示

    1.IDEA 链接数据库 2.IDEA 设置数据库方言为链接的数据库方言 3.IDEA SQL 解析范围设置 4. 可以在mapper xml 中写select 测试了.

  9. #3038：How Many Answers Are Wrong （带权并查集）

    HDU 3038 第一次接触带权并查集 //带权并查集 更新父节点的同时更新权值 #include<bits/stdc++.h> using namespace std; const in ...

  10. AtCoder Beginner Contest 171 AK！

    这一场好神奇!能AK了 AB水题, C - One Quadrillion and One Dalmatians 把一个数字转化为字母,规则为 \([1,26]\) 对应 \([a,z]\) , 27 ...