CSS：7个你可能不认识的单位
原文：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大小同步的效果，有木有？！
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
CSS：7个你可能不认识的单位的更多相关文章
- 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- web（六）css的基本语法、取值与单位
css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...
- css: IE没法调整那些使用px作为单位的字体大小
<style type="text/css"> h1{font-size:40px;} h3{font-size:30px;} p{font-size:14xp;} & ...
- html / css打印样式
最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...
- css中的1px并不总等于设备的1px（高分辨率不等 低分辨等）
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...
- css狂记
接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集.整理... CSS 背景属性(Background) 属性 描述 CSS background 在一个声明中设置所有的背景属性 ...
- css中单位em和rem
一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...
- CSS中常用的字体单位：px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...
- CSS里的单位
CSS中预设了16种颜色以及16种颜色的衍生色,这16种颜色是CSS规范推荐的.并且一些主流的浏览器都可以识别.例如以下表所看到的: 十六进制颜色是最经常使用的定义方式.它的基本格式为#RRGGBB, ...
- CSS中字体尺寸总结
下面是我总结的css中关于字体尺寸的知识,欢迎高手拍砖! 前端开发过程中,我们经常会遇到设置某个div固定显示几行文本:这时我们需要精确计算每个字号字体的宽度和高度. 下面是w3school中描述的尺 ...
随机推荐
- windows下编译FreeSwitch
FreeSWITCH的是一个跨平台的开源电话交换平台 windows版本:win7 64位的操作系统 [下载] 我下载的是release版本,下载的文件是freeswitch-1.4.20.zip,下 ...
- Hibernate逍遥游记-第13章 映射实体关联关系-006双向多对多(分解为一对多)
1. 2. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate ...
- Delphi 发展历史
自然人的软件著作权,保护期为自然人终生及其died后50年:软件是合作开发的,截止于最后died的自然人died后第50年的12月31日.法人或者其他组织的软件著作权,保护期为软件首次发表之后50年, ...
- underscore.js 一个强大的js函数库
Underscore提供的100多个函数,主要涉及对Collection.Object.Array.Function的操作: Collections(集合) each, map, reduce, re ...
- Maven基本操作命令
1.mvn package 此命令包含一系列过程:validate-->compile-->test-->package Maven根据pom文件里packaging的配置,决定是生 ...
- UVa 10075 - Airlines
航线算球面距离,需要经纬度转空间坐标. 任意两点间距离用Floyd求出来,查询时直接查表. #include <cstdio> #include <map> #include ...
- [置顶] 手机通过socket控制电脑关机，重启，注销等功能
服务端 package com.pc; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOE ...
- 1128. Partition into Groups(图着色bfs)
1128 写的dfs貌似不太对 bfs重写 用bfs将图进行黑白染色 如果有超过一个与自己颜色相同的点 就把该点存入栈中 最后处理栈中的点 判断此点是否合法 不合法 取反 取反后再判断相邻点是否合法 ...
- Chosen中选择项的更新
Chosen 选择项的动态修改/更新 如果你需要去动态更新select选择框里的选择项,你需要通知Chosen去响应这个变动,你需要在这个选项框是触发一个"liszt:updated&quo ...
- super.getClass()方法
下面程序的输出结果是多少? importjava.util.Date; public class Test extends Date{ public static void main(String[] ...