7个你可能不认识的CSS单位

时间 2019-11-18

标签可能不认识 css 单位栏目 CSS 繁體版

原文原文链接

众所周知CSS技术咱们虽然很熟悉，在使用的过程却很容易被困住，这让咱们在新问题出现的时候变得很不利。
随着web继续不断地发展，对于新技术新解决方案的要求也会不断增加。所以，做为网页设计师和前端开发人员，咱们别无选择，必须熟悉咱们手上的工具，作到知己知彼，这样才能百战不殆。css

这就意味着有那么些个特别的货，虽然日常都不怎么会用上，可是一旦某个地方须要它们了，他们就真的是特么得合适不过来了呢。html

今儿，我就准备向大伙儿介绍一些大家以前可能不多见过CSS家伙们。他们每一个都是度量的单位，相似pixel 和 em 这样的，可是颇有可能你以前历来就没听过这些家伙们！就让咱们一块儿来交个朋友吧~前端

rem

咱们首先介绍下和咱们熟悉的很类似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子，若是你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。web

<body> <div class="test">Test</div></body> body { font-size: 14px;}div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}浏览器

你看，这里div这娃的字体大小是1.2em。解释来讲，就是他从body爹爹那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。ide

可是，若是你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？在下面这一小段代码里咱们应用了和上面同样同样的CSS，每个div都从它上一级父元素继承了字体大小，而且逐渐得增长。工具

<body> <div> Test  <div> Test  <div> Test  </div> </div> </div></body>布局

实例
虽然在某些地方这正是咱们想要的，可是一般状况下咱们仍是但愿就依赖单一的相对度量单位就好。这时候嘛，咱们就可使用 rem 了。 ‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分状况下，根元素就是<html>元素了。字体

html { font-size: 14px;}div { font-size: 1.2rem;}网站

这样在上面的那三个嵌套的div娃们的字体大小都是 1.2*14px = 16.8px 了。

适用于网格布局

Rems 不只仅只是在设置字体大小上很方便。再炒个栗子，你能够用基于html根元素字体大小的rem做为整个网格布局或者UI库的大小单位，而后在其余特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性，

.container { width: 70rem; // 70 * 14px = 980px}

概念上来讲，这个方法的思想就是让你的界面根据你的内容进行缩放。可是，这样作并非对全部的状况都有意义。

vh and vw

响应式web设计离不开百分比。可是，CSS百分比并非全部的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。可是若是你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？这就是 vh 和 vw 单位为咱们提供的。

1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，若是视口宽度未750， 1vw = 750px/100 = 7.5 px。

能够想象到的，他们有不少不少的用途。好比，咱们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

.slide { height: 100vh;}

假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果，有木有？！
实例

vmin and vmax

vh和 vm 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度二者的最小或者最大值。好比，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。若是宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。
那么问题来了，咱们应该在什么场景下使用这两个单位呢？
假设有一个元素，你须要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就能够作到了。再来个栗子，能够这样定义一个至少有两个边触摸到屏幕的方形：

.box { height: 100vmin; width: 100vmin;}

若是你要让这个方形框框始终铺满整个视口的可见区域（四边始终触摸到屏幕的四边）

.box { height: 100vmax; width: 100vmax;}

结合使用这些单位能够为咱们提供一个新颖有意思的方式来灵活地利用咱们视口的大小。

ex and ch

ex 和 ch 单位，相似于 em 和 rem, 依赖于当前的字体和字体大小。可是，不一样的是，这两货是基于字体的度量单位，依赖于设定的字体。

ch 单位一般被定义为数字0的宽度。你能够在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母N的宽度设置为40ch，那么在另外一种类型的字体里它却能够包含40个字母。这个单位的传统用途主要是盲文的排版，可是除此以外，确定还有能够应用他的地方。

ex 定义为当前字体的小写x字母的高度或者 1/2 的 1em。不少时候，它是字体的中间标志。

x-height; the height of the lower case x

这些单位有不少用途，大部分用于版式的微调。比方说，sup 元素（上角文字标），能够经过position:relative;bottom: 1ex;实现。相似的方法，你能够实现一个下角文字标。浏览器默认的方式是利用
上标和下标特定垂直对齐规则，可是若是你想更细粒度更精确得控制，你能够像下面这样作：

sup { position: relative; bottom: 1ex;}sub { position: relative; bottom: -1ex;}

结论

持续关注不断发展壮大的CSS技术无疑是很重要的，这样你才能掌握你所持有的工具的所有技能。说不定未来你遇到的某个特殊的问题就须要使用这些复杂的单位来解决。花点时间去阅读新的技术规范，注册订阅一些不错的网站或者资源，相似 cssweekly这样的。固然不要忘记如今就去注册像TUTS +这样的网站来获取每周的更新，课程，免费教程还有资源！

转自伯乐在线