公共类

公共类是 layui.css 中并不以组件形式存在的公共 class 选择器，而又能用于任何地方。

普通类

className	描述
layui-main	设置一个固定宽度为 `1160px` 的水平居中块
layui-border-box	设置元素及其所有子元素均为 `box-sizing: content-box` 模型的容器
layui-clear	清除前面的同级元素产生的浮动
layui-clear-space ^2.8+	清除容器内的空白符
layui-inline	设置元素为内联块状结构
layui-elip	设置单行文本溢出并显示省略号
layui-unselect	屏蔽选中
layui-disabled	设置元素为不可点击状态
layui-circle	设置元素为圆形。需确保 `width` 和 `height` 相同

显示隐藏

className	描述
layui-show	设置元素为 `display: block` 可见状态
layui-hide	设置元素为 `display: none` 隐藏状态，且不占用空间
layui-show-v	设置元素为 `visibility: visible` 可见状态
layui-hide-v	设置元素为 `visibility: hidden` 不可见状态，且依旧占用空间

三角实体

className	描述
layui-edge	定义一个三角形基础类
layui-edge-top	设置向上三角
layui-edge-right	设置向右三角
layui-edge-bottom	设置向下三角
layui-edge-left	设置向左三角

示例

  向上三角： 
<i class="layui-edge layui-edge-top"></i> 
<i class="layui-edge layui-edge-top" style="border-bottom-color: black;"></i>
<hr>
向右三角： 
<i class="layui-edge layui-edge-right"></i>
<i class="layui-edge layui-edge-right" style="border-left-color: black;"></i>
<hr>
向下三角： 
<i class="layui-edge layui-edge-bottom"></i>
<i class="layui-edge layui-edge-bottom" style="border-top-color: black;"></i>
<hr>
向左三角： 
<i class="layui-edge layui-edge-left"></i>
<i class="layui-edge layui-edge-left" style="border-right-color: black;"></i>

内外边距

className	描述
layui-padding-1	4px 内边距
layui-padding-2	8px 内边距
layui-padding-3	16px 内边距
layui-padding-4	32px 内边距
layui-padding-5	48px 内边距
layui-margin-1	4px 外边距
layui-margin-2	8px 外边距
layui-margin-3	16px 外边距
layui-margin-4	32px 外边距
layui-margin-5	48px 外边距

背景颜色

className	背景色	预览
layui-bg-red	红
layui-bg-orange	橙
layui-bg-green	绿
layui-bg-blue	蓝
layui-bg-purple ^2.8+	紫
layui-bg-black	深
layui-bg-gray	浅

文字大小

className	文字大小和预览
layui-font-12	12px
layui-font-13 ^2.8+	13px
layui-font-14	14px
layui-font-16	16px
layui-font-18	18px
layui-font-20	20px
layui-font-22 ^2.8+	22px
layui-font-24 ^2.8+	24px
layui-font-26 ^2.8+	26px
layui-font-28 ^2.8+	28px
layui-font-30 ^2.8+	30px
layui-font-32 ^2.8+	32px

文字颜色

className	文字颜色和预览
layui-font-red	红
layui-font-orange	橙
layui-font-green	绿
layui-font-blue	蓝
layui-font-purple ^2.8+	紫
layui-font-black	深
layui-font-gray	浅

文档容器

通过设置 class="layui-text" 定义一段包含标题、段落、列表、链接等组合的文档区域。

  <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文本区域演示 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
  <div class="layui-text" style="padding: 16px;">
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    
    <hr>
    <ul>
      <li>列表1</li>
      <li>
        列表2
        <ul>
          <li>列表2-1</li>
          <li>列表2-2</li>
          <li>列表2-3</li>
        </ul>
      </li>
      <li>列表3</li>
    </ul>
    <hr>
    <ol>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
    </ol>
    <hr>
    <h2>标题2</h2>
    <p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1</p>
    <p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
    <blockquote>引用</blockquote>
    <p>这是一个包含<a href="javascript:;">超文本</a>和<strong>加粗文本</strong>的段落</p>
  </div>
</body>
</html>