/* 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. Javascript面向对象的程序设计 —— 自定义类实现继承的6种方法

    许多OO语言都支持两种继承方式: 接口继承:只继承方法签名: 实现继承:继承实际的方法.ECMAScript只支持实现继承,实现继承是继承实际的方法,依靠原型链来实现.1.原型链原型链是实现继承的主要 ...

  2. Ubuntu 20.04 设置时区、配置NTP同步 timesyncd 代替 ntpd

    本文的服务器环境为 Ubuntu 20.04 系统,一个拥有 sudo 权限的非 root用户,并开启了防火墙. 基本时间命令 要在 Ubuntu 20.04 系统上查看服务器时间,可以使用 date ...

  3. Windows 无法加载这个硬件的设备驱动程序。驱动程序可能已损坏或不见了。 (代码 39）

    哔站中有视频解决方案,可以直观看如何操作:Windows 无法加载这个硬件的设备驱动程序.驱动程序可能已损坏或不见了. (代码 39) 第一步:明确感叹号故障硬件(我的是蓝牙也可以是别的)--右键&q ...

  4. 轻量对象存储 LighthouseCOS 用户实践征文

    产品使用攻略.上云技术实践,有奖征集,多重好礼等您带回家- 存储桶一键挂载轻量应用服务器,简单易用,腾讯云轻量对象存储用户实践征文活动特惠:腾讯云轻量云专场特惠活动. 投稿说明 注册/登录腾讯云账号, ...

  5. 调试分析Linux 0.00引导程序

    Bochs虚拟机的配置文件 简介 Bochs 虚拟机的配置文件 描述待启动的虚拟机的配置,例如内存大小.启动镜像.网络功能.存储配置. Bochs运行后,会先查找配置文件,解析模拟器要虚拟的系统相关信 ...

  6. 文心一言 VS 讯飞星火 VS chatgpt （44）-- 算法导论6.1 1题

    一.在高度为h的堆中,元素个数最多和最少分别是多少? 文心一言: 在高度为 h 的二叉搜索树(BST)中,元素个数最多和最少的情况分别如下: 1.最多情况:当每个节点都包含两个子节点时,BST 中的元 ...

  7. 【.NET开发福音】使用Visual Studio将JSON格式数据自动转化为对应的类

    前言: 这段时间一直在做一个第三方平台的对接,对接第三方其实无非就是请求调用第三方的相关接口接收返回过来的相关参数.因此在这个过程中就会涉及大量的JSON响应参数或者请求参数转化为对应的实体类的情况, ...

  8. 在线编辑Excel——插入图表

    本文内容介绍如何通过Excel在线编辑器--Spire.Cloud Excel来实现图表插入,插入图表时,可插入常见的柱状图.饼图.折线图.条形图.面积图.散点图.股价图等.这里挑选几种图表来展示插入 ...

  9. 云小课｜MRS基础操作之集群健康检查

    本文分享自华为云社区<云小课|MRS基础操作之集群健康检查>,作者:阅识风云. 阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视 ...

  10. EDS从小白到专家丨生态产业链高效协同的一计良策

    本文分享自华为云社区<[EDS从小白到专家]第3期:生态产业链高效协同的一计良策>,作者:开天aPaaS小助手 . 号外! 华为将于2023年9月20-22日,在上海世博展览馆和上海世博中 ...