如何在HTML中使用类调用CSS？新手CSS字体属性混淆求助

一、理清易混淆的文本/字体属性 #

直接把每个属性的核心作用拆透，从根上避免混用：

• text-align: 管文本/行内元素的水平对齐方式，比如左对齐(left)、居中(center)、右对齐(right)，只控制内容在容器里的水平位置，和字体本身样式无关。
• font-family: 控制字体类型，比如用微软雅黑("Microsoft YaHei")、宋体(SimSun)或无衬线字体(sans-serif)，决定文字的"长相"。
• font-size: 控制字体大小，常用单位px、rem、em，比如16px就是文字的尺寸规格。
• font-weight: 控制字体粗细，常用值normal(常规)、bold(加粗)，也可用数字400(对应normal)、700(对应bold)，仅改变文字的粗细程度。

记个简单区分技巧：带font-前缀的都是和字体本身（样式、大小、粗细）绑定的，text-align是管内容对齐的，别搞混就行。

二、图片并排的实用实现方法 #

针对你遇到的图片并排失败问题，给你三种靠谱方案：

方法1：Flex布局（现代首选，简洁灵活） #

给图片的父容器添加display: flex，默认就是横向排列，还能轻松控制间距、对齐：

.image-container {
  display: flex;
  gap: 12px; /* 两张图片之间的间距 */
  /* 如需垂直居中，加align-items: center; */
  /* 容器宽度不足时自动换行，加flex-wrap: wrap; */
}
.image-container img {
  width: 50%; /* 两张图片各占容器一半宽度 */
  max-width: 320px; /* 限制图片最大宽度，避免拉伸变形 */
}

对应HTML结构：

<div class="image-container">
  <img src="你的图片路径1" alt="图片1描述">
  <img src="你的图片路径2" alt="图片2描述">
</div>

方法2：inline-block（兼容旧浏览器） #

把图片设为inline-block，同时处理换行带来的默认间距：

.image-container img {
  display: inline-block;
  width: 48%; /* 留2%的间距避免撑满容器 */
  margin-right: 2%;
  vertical-align: top; /* 避免图片因高度不同导致底部对齐错乱 */
}
/* 去掉最后一张图片的右边距 */
.image-container img:last-child {
  margin-right: 0;
}

方法3：Float布局（旧方案，了解即可） #

给图片加float: left，同时给父容器清除浮动避免高度塌陷：

.image-container {
  overflow: hidden; /* 清除浮动 */
}
.image-container img {
  float: left;
  width: 48%;
  margin-right: 2%;
}
.image-container img:last-child {
  margin-right: 0;
}

三、巩固基础的小技巧 #

1. 写属性前先明确需求：要改字体大小就找font-size，要对齐内容就找text-align，别凭感觉瞎写。
2. 边写边测试：改一个属性就刷新页面看效果，用多了自然能记住每个属性的作用。
3. 整理专属笔记：把font-系列和text-系列属性分开列出来，记不住时翻一翻，重复几次就熟了。

内容的提问来源于stack exchange，提问作者jpfernandes