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中描述的尺 ...
随机推荐
- java四种数组排序
数组的四种排序 1.快速排序法Arrays.sort(); 用法1.sort(byte[] a) 对指定的 byte 型数组按数字升序进行排序. sort(byte[] a, int fro ...
- http怎样保持有状态？
HTTP协议的特点 HTTP协议是无状态的协议,发送的请求不记录用户的状态,不记录用户的信息.就相当于它被访问了2次,不知道是哪两人访问的,或者是一个人访问两次. 正是因为HTTP协议的这一特点,用户 ...
- 向ArcMap添加未出现的工具 如planarize lines
打开某工具的customize 找到你要添加的工具 将其拖到你要放置的工具条即可
- spring 定时任务的 执行时间设置规则（转）
spring 定时任务的 执行时间设置规则 单纯针对时间的设置规则org.springframework.scheduling.quartz.CronTriggerBean允许你更精确地控制任务的运 ...
- HDU5090——Game with Pearls(匈牙利算法|贪心)(2014上海邀请赛重现)
Game with Pearls Problem DescriptionTom and Jerry are playing a game with tubes and pearls. The rule ...
- Filter过滤非法字符
示例:定义一个Filter,用于用户发言中出现的“晕”字,即如果没有这个字则允许发言,如果有这个字则不允许发言并提示错误. CharForm.jsp <%@ page language=&quo ...
- 10个实用的PHP正则表达式
正则表达式是程序开发中一个重要的元素,它提供用来描述或匹配文本的字符串,如特定的字符.词或算式等.但在某些情况下,用正则表达式去验证一个字符串比较复杂和费时.本文为你介绍10种常见的实用PHP正则表达 ...
- Android中常见的MVC模式
MVC模式的简要介绍 MVC是三个单词的缩写,分别为: 模型(Model),视图(View)和控制Controller). MVC模式的目的就是实现Web系统的职能分工. Model层实现系统中的业务 ...
- POJ 3185 The Water Bowls（高斯消元-枚举变元个数）
题目链接:http://poj.org/problem?id=3185 题意:20盏灯排成一排.操作第i盏灯的时候,i-1和i+1盏灯的状态均会改变.给定初始状态,问最少操作多少盏灯使得所有灯的状态最 ...
- iOS学习笔记：iOS核心动画中的常用类型
CATransaction 当我们在自定义的图层上修改某些支持动画的属性时,系统会为该属性的修改自动产生动画.这种其实属于隐式动画.隐式动画要得益于CATransaction. 一个CATransac ...