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中描述的尺 ...
随机推荐
- 基于Spring设计并实现RESTful Web Services(转)
基于Spring设计并实现RESTful Web Services 在本教程中,你将会使用Spring来创建一个具有生产力的RESTful网络服务. 为什么用RESTful网络服务? 从和Amazon ...
- MSRA面试总结
http://blog.renren.com/share/405984844/16014442499 注:以下内容纯凭记忆,由于已经过去一个多月,不保证准确性.由于面试前没有签保密协议,本文透露了比较 ...
- Oracle Gateways透明网关访问SQL Server
自己的本机安装了Oracle 12c,公司的平台需要同时支持Oracle与SQL Server,很多时候都有将数据从Oracle同步到SQL Server的需求.通过SQL Server的link S ...
- C++ string类的学习
string类对于处理字符串的一些应用非常的方便,我个人感觉,string和字符数组const char *很像,而且又比字符数组用起来方便的多. 注意其删除,取子串,插入等函数里面都有一个重载版本是 ...
- 命名空间“System.Web”中不存在类型或命名空间名称“Script”(是缺少程序集引用吗?)
网上有些资料说,在项目上鼠标右键,添加引用→.Net→System.Web.Entensions就可以了. 实际上很多时候在项目中的添加引用窗口上,根本找不到System.Web.Entensions ...
- BZOJ_1030_[JSOI2007]_文本生成器_(AC自动机+DP)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1030 给出一些单词,问长度为\(m\)的文章有多少文章中出现过任意一个或多个单词. 分析 文章 ...
- POJ 1966 Cable TV Network (无向图点连通度)
[题意]给出一个由n个点,m条边组成的无向图.求最少去掉多少点才能使得图中存在两点,它们之间不连通. [思路]回想一下s->t的最小点割,就是去掉多少个点能使得s.t不连通.那么求点连通度就枚举 ...
- dynamic_cast，const_cast，static_cast，reinterpret_cast 详解
如果直接指针直接强转,将只能访问虚函数的内容,而不能访问特定类中的特定成员或方法!!!! 强制类型转换运算符:C++有四种强制类型转换符,分别是dynamic_cast,const_cast,stat ...
- LeetCode Single Number II 单元素2
题意:给一个序列,其中只有1个元素只出现1次,其他的都一定出现3次.问这个出现一次的元素是多少? 思路: (1)全部元素拆成二进制,那么每个位上的1的个数应该是3的倍数,如果不是3的倍数,则ans的这 ...
- 当ASP.NET MVC模型验证遇上CKEditor
项目需要,使用到了CKEditor编辑器.这是个很不错的富文本编辑器,但是当它绑定的字段需要进行模型验证的时候,却会出现验证失效的问题.因此本文旨在记录这个问题和给出解决办法.以下以Validatio ...