使用CSS Tachyons可通过预定义类高效控制布局与排版。1. 间距类:ma1–ma6、pa1–pa6设置外边距和内边距,mt3、mb4等控制单方向,mx-auto实现水平居中;2. 字体类:f1–f6设定字号,fw1–fw9调整粗细,black、tc等设置颜色与对齐;3. 排版增强:lh-copy优化行高,measure限制行宽提升可读性;4. 响应式支持:如f3 f2-ns在不同屏幕适配字体。组合这些类可快速构建响应式界面,无需自定义CSS。

使用 CSS Tachyons 控制间距和字体样式非常高效,它通过一系列预定义的类名实现快速布局与排版。以下是具体用法说明。
控制间距(Margin 与 Padding)
CSS Tachyons 提供简洁的类名来设置外边距和内边距,单位基于 0.25rem 的倍数(默认为 4px 步长)。
**外边距(Margin)**- ma1 到 ma6:设置所有方向的外边距,数值越大间距越大(如 ma3 = 1rem)
- mt3、mb4、ml2、mr5:分别控制上、下、左、右外边距
- mx-auto:水平居中,等同于 margin: 0 auto;
- mx3:同时设置左右外边距为 0.75rem
- my4:同时设置上下外边距为 1rem
- pa1 到 pa6:设置四个方向的内边距
- pt2、pb3、pl1、pr5:分别控制上、下、左、右内边距
- px4 py2:设置左右内边距为 1rem,上下为 0.5rem
例如:
内容区块
表示:上外边距 0.75rem、下外边距 1rem、左右内边距 0.75rem、上下内边距 0.5rem。
立即学习“前端免费学习笔记(深入)”;
设置字体样式与文本排版
CSS Tachyons 提供丰富的文本类来控制字体大小、颜色、粗细和对齐方式。
**字体大小(Font Size)**- f1:最大字号(约 3rem)
- f2, f3, f4, f5, f6:依次减小,f6 最小(约 1rem)
- fw1 到 fw9:字体粗细,fw4 是 normal,fw7 是 bold
- black、dark-gray、mid-gray、white:常用文本颜色
- tc:文本居中(text-align: center)
- tl:左对齐,tr:右对齐
- lh-copy:设置行高为 1.5,适合段落阅读
- measure:限制每行字符数(约 60ch),提升可读性
示例:
标题文本
这是一段可读性强的正文内容。
响应式辅助类(可选增强)
若引入完整 Tachyons 框架,还可使用响应式类:
- f3 f2-ns:在大屏幕上为 f3,窄屏为 f2
- mt4 mt2-ns:宽屏用大间距,窄屏缩小
基本上就这些。通过组合这些类,你可以快速构建美观且响应式的界面,无需写自定义 CSS。关键是熟悉命名规则,就能高效使用。不复杂但容易忽略细节。










