7个你可能不认识的 CSS 单位
在前端开发中,我们通常使用像 px
或 %
这样的标准 CSS 单位来实现元素的尺寸和布局。但是还有许多其他类型的单位可以为我们带来更加灵活的设计选项。接下来,我将介绍七个你可能不知道的 CSS 单位,并提供示例代码和学习指南。
1. em 和 rem
em
和 rem
都是相对于文本字体大小的单位。em
表示当前元素的字体大小,而 rem
则是相对于根元素(即 <html>
元素)的字体大小。这使得 rem
更适合响应式设计,因为它们会随着视图窗口的大小而调整。
------- - ---------- ----- - ------ - ---------- ------ -- --- ---- -- -------------- ----- -- --- ---- -- -
2. vh 和 vw
vh
和 vw
表示视窗高度和宽度的百分比。例如,50vh
表示视窗高度的一半。
-------- - ------- ----- ------ ----- -
3. vmin 和 vmax
vmin
和 vmax
分别表示视窗高度和宽度中的最小值和最大值。例如,如果视窗高度为 768px,宽度为 1024px,则 1vmin
相当于 7.68px
,而 1vmax
相当于 10.24px
。
-------- - ------- ------- ------ ------- -
4. fr
fr
表示浏览器可用空间(剩余空间)的一部分。例如,如果一个容器中有三个元素,并且其中两个元素宽度为 1fr
,则这些元素将平均占用容器中的可用空间。
---------- - -------- ----- ---------------------- --- --- ---- -
5. ch
ch
表示当前字体中字符 "0" 的宽度。由于 "0" 字符在大多数字体中都具有相同的宽度,因此 ch
单位通常用于实现等宽字体的布局。
-------- - ------ ----- -- --- -- - --- --- -- -
6. ex
ex
表示当前字体中字符 "x" 的高度。由于 "x" 字符在大多数字体中都具有相同的高度,因此 ex
单位通常用于实现基线对齐的布局。
-------- - ------- ---- -- --- - - --- --- -- -
7. calc()
calc()
函数可以用于在 CSS 中执行算术操作。例如,如果一个元素的宽度为 50%
,并且我们希望将其减去 20px
,则可以使用 calc()
函数来实现。
-------- - ------ -------- - ------ -
这些单位提供了更多的设计选项,并且可以使响应式布局更加容易。掌握这些单位可以提高你的 CSS 技能水平并让你的代码更加灵活和可读。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/151