预设样式

内外边距

字母指代

字母	样式属性	说明
m	margin	外边距，样式简写
p	padding	内边距，样式简写
h	-	水平 left + right，方向简写
v	-	垂直 top + bottom，方向简写
l	left	左侧，方向简写
r	right	右侧，方向简写
t	top	顶部，方向简写
b	bottom	底部，方向简写
a	auto	自动边距

可取边距值列表

0 5 10 15 20 25 30 40 50

单位为 px

样式名规则

样式简写 + [方向简写] + 边距值 | -a

示例

<!-- 无外边距  -->
<div class="m0"></div>

<!-- 顶部外边距 5px  -->
<div class="mt5"></div>

<!-- 左侧内边距 10px -->
<div class="pl10"></div>

<!-- 水平内边距 10px -->
<div class="ph10"></div>

<!-- 水平内边距 10px，垂直外边距自动 -->
<div class="ph10 mv-a"></div>

<!-- 除了右侧内边距 10px，其他方向无内边距 -->
<div class="p0 pr10"></div>

<!-- 顶部内边距 5px，同时底部外边距 5px -->
<div class="pt5 mb5"></div>

宽高

样式名列表

样式名	说明
h100	高度为父元素的 100%
w100	宽度为父元素的 100%
hw100	宽度和高度均为父元素的 100%

示例

<!-- 高度为父元素的 100% -->
<div class="h100"></div>

定位类型

样式名列表

样式名	说明
relative	相对定位
absolute	绝对定位
fixed	固定定位

示例

<!-- 元素绝对定位 -->
<div class="absolute"></div>

文本对齐

样式名列表

样式名	说明
text-left	左对齐
text-center	居中对齐
text-right	右对齐

示例

<!-- 元素内容居中对齐 -->
<div class="text-center"></div>

WARNING

该样式会被其后代元素继承

忽略鼠标事件

样式名列表

样式名	说明
no-pointer	添加该样式，将使元素不在响应鼠标事件

示例

<!-- 元素将不能被点击、拖拽。 -->
<div class="no-pointer"></div>

WARNING

其后代元素也将不能响应鼠标事件

浮动

样式名列表

样式名	说明
pull-left	左浮动
pull-right	右浮动
clear-both	清除两侧浮动，即不允许两侧出现浮动元素
clear-left	清除左侧浮动，即不允许左侧出现浮动元素
clear-right	清除右侧浮动，即不允许右侧出现浮动元素

示例

<!-- 元素右浮动 -->
<div class="pull-right"></div>

flex 格子布局系统

TIP

这是一套通过组合样式来达成布局需求的样式集合

布局容器样式列表

样式名称	说明	作用
flex	开启格子布局	将元素指定为 flex 格子布局元素
row	横向布局	辅助样式，子元素将在水平方向上进行布局 默认为横向布局，可以不写
column	纵向布局	辅助样式，子元素将在垂直方向上进行布局
space-between	分散子元素	如果子元素的宽度之和不能填满容器宽度，则空白将平局分布到元素之间
space-around	分散子元素	如果子元素的宽度之和不能填满容器宽度，则空白将平局分布到元素两侧
align-stretch	分散子元素	横向布局时子元素在垂直方向拉伸以适应容器 纵向布局时在水平方向上拉伸以适应容器
justify-start	堆叠子元素	横向布局时子元素靠向容器左侧 纵向布局时靠向容器顶部
justify-end	堆叠子元素	横向布局时子元素靠向容器右侧 纵向布局时靠向容器底部
justify-center	堆叠子元素	横向布局时子元素在水平方向上靠向容器中部 纵向布局时在垂直方向上靠向容器中部
align-content-start	堆叠子元素	横向布局多行元素时子元素在垂直方向上靠向容器顶部 纵向布局多列元素时在水平方向上靠向容器左侧
align-content-end	堆叠子元素	横向布局多行元素时子元素在垂直方向上靠向容器底部 纵向布局多列元素时在水平方向上靠向容器右侧
align-content-center	堆叠子元素	横向布局多行元素时子元素在垂直方向上靠向容器中部 纵向布局多列元素时在水平方向上靠向容器中部
align-start	对齐子元素	横向布局时子元素在垂直方向上靠向容器顶部 纵向布局时在水平方向上靠向容器左侧
align-end	对齐子元素	横向布局时子元素在垂直方向上靠向容器底部 纵向布局时在水平方向上靠向容器右侧
align-center	对齐子元素	横向布局时子元素在垂直方向上靠向容器中部 纵向布局时在水平方向上靠向容器中部
wrap	指示子元素可换行	当子元素宽度和大于容器时，自动折行

子元素样式列表

样式名称	说明	作用
grid	标记元素为 flex 格子布局元素	仅当子元素指定该样式时，下列辅助样式才会生效
grow	指示元素可以自动扩张	元素将尽可能的多占容器剩余空间，并挤压其他元素
shrink	指示元素可以自动收缩	当容器空间不足时，元素将尽可能的收缩，以为其他元素腾出空间
no-grow	指示元素不可扩展	即使容器有多余空间，元素也将保持原尺寸
no-shrink	指示元素不可收缩	即使容器空间不足，元素也将保持原始尺寸
h-m-n	高度占比	其中 m,n 均为数字，并且 1 < m < 7, 1 < n < 7 表示将容器纵向空间分为 m 份，元素占用 n 份
w-m-n	宽度占比	其中 m,n 均为数字，并且 1 < m < 7, 1 < n < 7 表示将容器纵向空间分为 m 份，元素占用 n 份

示例

<!-- 开启flex格子布局，子元素靠左堆叠，纵向居中对齐 -->
<div class="flex justify-start align-center">
  <!-- no-grow: 子元素不可扩张 -->
  <!-- w-5-2: 将容器水平宽度分为 5 份，该元素占 2 份 -->
  <div class="grid no-grow w-5-2"></div>
  <!-- w-5-2: 子元素占 2 份 -->
  <!-- 未设置 no-grow，如果子元素内容过多，将自动扩张 -->
  <div class="grid w-5-2"></div>
</div>

<!-- 开启flex格子布局，纵向布局，子元素左对齐，纵向居中堆叠 -->
<div class="flex column align-start justify-center">
  <!-- no-grow: 子元素不可扩张 -->
  <!-- w-3-2: 将容器水平宽度分为 3 份，该元素占 2 份 -->
  <!-- h-4-1: 将容器垂直高度分为 4 份，该元素占 1 份 -->
  <div class="grid no-grow w-3-2 h-4-1"></div>
  <!-- w-3-2: 水平宽度占 2 份 -->
  <!-- h-4-2: 垂直高度占 2 份 -->
  <!-- 未设置 no-grow，如果子元素内容过多，将自动扩张 -->
  <div class="grid w-3-2 h-4-2"></div>
</div>

字号

样式列表

样式名称	说明
f12	1.2rem
f13	1.3rem
f14	1.4rem
f15	1.5rem
f16	1.6rem
f18	1.8rem
f21	2.1rem
f24	2.4rem
f32	3.2rem

什么是 rem?

rem 是相对单位，1.2rem 表示当前值为文档根元素 html 设置字号的 1.2 倍
本框架下，根元素默认字号为 10px, 即 1.2rem 为 12px

示例

<p class="f16">字号为 1.6rem</p>