子类的说明与使用
原子类是一种用于指定元素样式的基础类，它们只有一个属性：display: inline-block;，并且不包含任何内边距(padding)和外边距(margin)。原子类非常适合于构建重复使用的组件和样式。使用原子类可以提高样式的可复用性和可维护性，因为它们是单一的、独立的类，可以方便地组合和重复使用。
常见的原子类
以下是一些常见的原子类，以及它们的作用和示例。
.dib
.dib 是 display: inline-block; 的缩写，它将元素显示为内联块级元素，并且可以设置宽度、高度、内边距(padding)和外边距(margin)。使用 .dib 类可以将元素垂直排列，而不需要使用浮动元素或定位元素。
<div class="dib" style="width: 100px; height: 50px; background-color: red;"></div>
该类可以应用于多种元素，如图标、按钮、文本框等。
.tc
.tc 是 text-align: center; 的缩写，它可以使元素内的文本居中显示。这个类可以用于按钮、标题、图像等元素，使它们在视觉上更加居中。
<div class="tc">居中显示文本</div>
该类可以用于多种元素，如标题、按钮、文本框等。
.fw
.fw 是 font-weight: bold; 的缩写，它可以使元素内的文本加粗显示。使用 .fw 类可以使文本更加突出和易于阅读。
<div class="fw">加粗文本</div>
该类可以用于多种元素，如标题、按钮、导航栏等。
.f3
.f3 是 font-size: 1rem; 的缩写，它可以使元素内的文本显示为相对于根元素的标准字体大小。使用 .f3 类可以使文本大小更加一致和可预测。
<div class="f3">标准字体大小文本</div>
该类可以用于多种元素，如标题、导航栏、正文等。
.bg
.bg 是 background-color: #hexcode; 的缩写，它可以为元素设置背景颜色。
<div class="bg-red">红色背景</div>
该类可以用于多种元素，如导航栏、按钮、图标等。
.pa
.pa 是 position: absolute; 的缩写，它可以使元素相对于其最近的非静态祖先元素的位置进行定位。
<div class="pa" style="top: 10px; left: 10px;">相对定位</div>
该类可以用于多种元素，如提示框、下拉菜单、弹出框等。
原子类的优点
使用原子类可以提高样式的可复用性和可维护性，因为它们是单一的、独立的类，可以方便地组合和重复使用。通过使用这些类，我们可以创建可重复使用的样式，从而减少样式表中的冗余代码，提高代码的可读性和可维护性。此外，它们还可以帮助我们更快地编写样式，因为它们是一些常见样式的缩写，可以减少样式表中的代码量。
<div class="dib tc fw f3">组合使用多个原子类</div>
总结
原子类是一个非常有用的工具，可以使我们更高效地编写 CSS 样式。通过学习常见的原子类，我们可以更好地理解它们的用途和优点，并且可以更好地应用于实际项目中。使用原子类可以使我们更快地编写样式，并且可以提高样式的可重用性和可维护性。因此，在编写 CSS 样式时，我们应该考虑使用原子类。
