原文：7 CSS Units You Might Not Know About

众所周知，当使用CSS技术的时候，很容被一些奇异问题给困住。而当我们面对新的问题时，这会让我们处于非常不利的位置。

但是，伴随着Web的发展，新的解决方案也在慢慢成熟。因此，作为一个Web设计和前端开发人员，除了对我们使用的工具或属性非常了解并能熟练运用，已经别无选择了。

这也意味着，对于那些特别的工具或属性，即使平常很少使用，但是当需要的时候，我们也能很好的把它运用到工作中。

今天，我就介绍一些你之前可能不知道的CSS 属性，是一些例如px和ems测量方面的单位，但是很有可能你之前都没听过这些。一起来看看吧。

rem

从与我们已经熟悉的但很相似的单位开始介绍。em被定义为相对于当前对象内文本的字体大小。如果你给body元素设置了一个字体大小，那么body的任何子元素的em值都等于body设置的font-size。

<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，也就是div从父类元素继承的字体大小的1.2倍。在这里，body的字体是14px，那么div的字体大小是1.2*14=16.8px.

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

<body>

    <div>

        Test <!-- 14 * 1.2 = 16.8px -->

        <div>

            Test <!-- 16.8 * 1.2 = 20.16px -->

            <div>

                Test <!-- 20.16 * 1.2 = 24.192px -->

            </div>

        </div>

    </div>

</body>

虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时，就应该用rem了，rem中的r代表根元素，它的值就是根元素设置的字体大小。在大多数情况下，根元素就是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和vw

响应式Web设计对百分比规则有很大的依赖性。然而，对于每一个问题，CSS百分比并不是最好的解决方案。CSS宽度是相对于包含它的最近的父元素的宽度的。如果你想使用的是视口的高度或宽度，而不是父元素的，那要肿么办呢？vh和vw就能满足这个需求了。

1vh等于1%的视口高度。例如，浏览器高度是900px，那么1vh = 900*1%=9px，同理，若视口宽度是750px,则1vw是7.5px。

它们的用途很广泛。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

.slide {

    height: 100vh;

}

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

demo

vmin和vmax

vh 和vw是相对于视口的宽度和高度，而vmin和vmax则关于视口高度和宽度两者的最小或者最大值。例如，如果浏览器的高宽分别为700px和 1100px，则1vmin=7px，1vmax=11px；如果高宽分别是1080px和800px,则 1vmin=8px,1vmax=10.8px。

那么什么时候需要这些值呢？

假设有一个元素，你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。例如，可以这样定义一个至少有两个边触摸到屏幕的方形：

.box {

    height: 100vmin;

    width: 100vmin;

}

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

.box {

    height: 100vmax;

    width: 100vmax;

}

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

ex和ch

单位ex和ch，就跟em和rem类似，取决于当前的字体和字体大小。然而，跟em和rem不同的是，ex和ch是基于字体的度量单位，依赖于设定的字体。

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

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

x-height; the height of the lower case x（read more about The Anatomy of Web Typography）

他们有很多的用途，但是大部分用于版式的微调。比如，sup元素（上角标字符），可以利用position:relative;bottom: 1ex;实现，同理，可以实现一个下角标文字。浏览器默认的处理方式是利用上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：

sup {

    position: relative;

    bottom: 1ex;

}

sub {

    position: relative;

    bottom: -1ex;

}

总结

持续关注CSS的发展和扩展是非常重要的，这样你才能熟练运用你工具箱中特定的工具。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来解决。花点时间去阅读新的技术规范，注册订阅一些不错的网站或者资源，类似 cssweekly这样的。 当然不要忘记现在就去注册像Tuts+这样的网站来获取每周的更新，课程，免费教程还有资源！

扩展阅读

More CSS unit goodness.

原文首发：http://www.ido321.com/1301.html

下一篇：HTML 5：你必须知道的data属性

CSS：7个你可能不认识的单位的更多相关文章

  1. 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  2. web（六）css的基本语法、取值与单位

    css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...

  3. css: IE没法调整那些使用px作为单位的字体大小

    <style type="text/css"> h1{font-size:40px;} h3{font-size:30px;} p{font-size:14xp;} & ...

  4. html / css打印样式

    最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...

  5. css中的1px并不总等于设备的1px（高分辨率不等 低分辨等）

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...

  6. css狂记

    接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集.整理... CSS 背景属性(Background) 属性 描述 CSS background 在一个声明中设置所有的背景属性 ...

  7. css中单位em和rem

    一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...

  8. CSS中常用的字体单位：px、em、rem和%的区别

    在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...

  9. CSS里的单位

    CSS中预设了16种颜色以及16种颜色的衍生色,这16种颜色是CSS规范推荐的.并且一些主流的浏览器都可以识别.例如以下表所看到的: 十六进制颜色是最经常使用的定义方式.它的基本格式为#RRGGBB, ...

  10. CSS中字体尺寸总结

    下面是我总结的css中关于字体尺寸的知识,欢迎高手拍砖! 前端开发过程中,我们经常会遇到设置某个div固定显示几行文本:这时我们需要精确计算每个字号字体的宽度和高度. 下面是w3school中描述的尺 ...

随机推荐

  1. spring中的aware接口

    1.实现了相应的aware接口,这个类就获取了相应的资源. 2.spring中有很多aware接口,包括applicationContextAware接口,和BeanNameAware接口. 实现了这 ...

  2. chm文件访问提示：已取消到该网页的导航

    chm文件访问提示:已取消到该网页的导航或不能链接网页 解决方案: 右击chm文件,选择:属性->解除锁定 ,再重新打开文件即可

  3. PowerDesigner技巧

    原文:PowerDesigner技巧 1.PowerDesigner使用MySQL的auto_increment  ◇问题描述:  PD怎样能使主键id使用MySQL的auto_increment呢? ...

  4. 纯后台生成highcharts图片有哪些方法?

    比如说,领导抛给你一个需求,把一些数据做成图表,每天通过邮件发送,让领导能在邮件中就看到图片,你会有什么思路呢?本人使用的是phantomjs这个神器,它的内核是WebKit引擎,不提供图形界面,只能 ...

  5. 三星原厂就K9K8G08U0D升级为K9K8G08U0E的回信

     1. please check the below timing first. K9F1G08U0E vs K9F1G08U0D Timing difference tR tPROG tBERS N ...

  6. Android开发之定义app在手机的安装位置

    定义app在手机的安装位置,可以通过在清单文件中添加属性 android:installLocation="" 该属性有三个值:auto(自动),preferExternal(外部 ...

  7. Git show-branch显示提交信息

    git中查看日志,我们用的比较多的就是 git log 以及带一些参数,如: 以一行显示提交日志: $ git log --pretty=oneline 显示最后的几次提交日志: $ git log ...

  8. enum,struct,union类型使用和长度

    VC,C++ Builder和lcc三个编译器 间枚举类型enum长度的情况. 各种C编译器默认的字节对齐数不一致,要写通用的代码,经常就是使用 #pragma pack(1) ... #pragma ...

  9. sdut 2831 Euclid (几何)

    题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2831 题意:给a, b,  c,  d, ...

  10. bzoj1563

    P<=10一开始是吓死我了 后来想到这就是一个经典的决策单调性解决1d1d动态规划的题目 像决策单调性完全可以打表找规律,这里有一篇严谨的证明https://www.byvoid.com/blo ...