--- title: 公共类 class toc: true --- # 公共类 > 公共类是 `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-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="{{= d.layui.cdn.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>