在现代网页设计和前端开发中，CSS 单位的选择对于构建灵活、响应式和可维护的用户界面至关重要。虽然我们大多数开发者都熟悉诸如px、em、rem、vh和vw等常见单位，但 CSS 世界远比我们想象的更加丰富多彩。实际上，CSS 规范中定义了许多鲜为人知的单位，它们在某些特定场景下能够提供更精确和灵活的布局控制。
本文将带你深入了解 7 个你可能不知道但应该了解的 CSS 单位。这些单位不仅能够提升你的 CSS 技能，还能帮助你在实现复杂设计时更加游刃有余。
1.cap（大写字母高度单位）
cap单位表示当前字体中大写字母的高度。与em或rem不同，cap单位直接与字体的大写字母高度相关，这使得它非常适合用于基于大写文本的视觉对齐。
margin-top: 2cap;
font-size: 16px;
在这个例子中，margin-top的值将等于当前字体中大写字母高度的两倍。这在需要精确控制元素与文本对齐时非常有用，尤其是在处理标题或按钮时。
2.ch（字符单位）
ch单位测量当前字体中“0”字符（零）的宽度。它特别适用于需要基于文本宽度进行布局的场景，例如输入字段或等宽内容容器。
width: 20ch;
这段代码将容器的宽度设置为大约能容纳 20 个“0”字符的宽度。这对于创建基于字符数的输入字段或文本容器非常有用，尤其是在处理代码编辑器或其他需要精确控制文本宽度的场景时。
3.ex（小写 x 高度单位）
ex单位基于当前字体中小写“x”的高度。它通常用于相对于文本的视觉高度进行布局，例如在文本元素的周围创建比例间距。
padding: 1ex2ex;
这段代码将在文本的上方和下方添加等于小写“x”高度的填充（1ex），并在两侧添加双倍的填充（2ex）。这使得元素的间距能够与文本的视觉高度保持一致，从而提升整体设计的协调性。
4.lh（行高单位）
lh单位表示元素line-height属性的计算值。这使得它非常适合用于创建与文本行高成比例的垂直间距。
margin-bottom: 1.5lh;
这段代码将元素的底部边距设置为当前行高的 1.5 倍。无论字体大小如何变化，边距始终与行高保持比例关系，从而确保布局的一致性。
5.vi和vb（视口内联/块单位）
vi和vb单位分别相对于视口在内联和块方向上的大小。这些单位特别适用于处理不同书写模式（如垂直文本）的布局。
width: 50vi;
height: 30vb;
这段代码将元素的宽度设置为视口内联方向的 50%，高度设置为视口块方向的 30%。这些单位在处理多语言布局或垂直文本时非常有用，因为它们会自动根据文档的书写模式进行调整。
6.ic（表意字符单位）
ic单位表示东亚脚本（如中文、日语）中典型表意字符的大小。它为东亚语言的内容布局提供了更精确的控制。
padding: 1ic;
这段代码将元素的填充设置为一个表意字符的大小。这使得东亚语言内容的视觉布局更加一致，避免了因字符大小差异导致的布局问题。
7.rpx（响应式像素）
rpx单位主要用于微信小程序等环境，它根据设备屏幕大小动态缩放。虽然它并非 CSS 的原生单位，但在特定应用场景中提供了极大的便利。
width: 750rpx;
这段代码将元素的宽度设置为 750 个响应式像素，自动根据屏幕宽度进行缩放。这使得在小程序中创建自适应布局变得更加简单和高效。
结论
通过了解和使用这些鲜为人知的 CSS 单位，你可以在编写样式时获得更多的灵活性和精确性。无论是处理文本布局、响应式设计，还是多语言支持，这些单位都能帮助你实现更复杂的设计需求。
因此，如果你想要进一步提升你的 CSS 技能，不妨从这些单位开始，尝试将它们应用到你的下一个项目中。
祝你编码愉快！
原文地址：https://medium.com/gitconnected/7-css-units-you-didnt-know-existed-but-should-aa609ada9ef0
作者：Arnold Gunter
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
