VALUES AND SIZING
Relative Length Units
Root-Relative Units
在CSS2.1中，相对长度单位有：em，ex ，CSS3中加入了 rem。
rem，root em。 em是相对于当前元素的字体大小，而rem是相对于根元素(html)的字体大小。
一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半)
来看个元素嵌套例子，
<ul>
<li>Western gorilla
<ul>
<li>Western lowland gorilla</li>
<li>Cross River gorilla</li>
</ul>
</li>
</ul>
li {
font-size: 2em;
}
第一级li元素的字体大小是2em，通常浏览器的默认字体大小是16px，则其字体大小是32px，第二级li元素的字体大小是2em，两倍于当前元素的字体大小，就变成了64px。
li{
font-size: 2rem;
}
如果设置为 rem，则两级li元素的字体将都是32px。
Viewport-Relative Units
当构建响应式布局时，习惯使用百分比，百分比适用于顶级元素，对于嵌套的元素，使用百分比就会碰到问题。
<body>
<div class="parent">
<div class="child">。。。</div>
</div>
</body>
.parent{
background-color: gray;
width: 75%;
}
.child{
background-color: #eeff11;
width: 86.66%;
}
上例中，设置parent的宽度是body的75%，如果想让child的宽度是body的65%，如果用百分比，必须设置为65/75=86.66%，这只是一层嵌套，如果有多层这样计算就会很复杂了。
CSS3提供了两个相对视窗的单位： vh, vw，分别代表viewport height和viewport width。1vw就是viewport width的1%。所以上例可以修改为：
.parent{
background-color: gray;
width: 75vw;
}
.child{
background-color: #eeff11;
width: 65vw;
}
还有两个单位： vmax, vmin，分别是vh, vw中的最大值和最小值。
Calculated Values
CSS3可以计算长度值了，通过 calc() 函数，该函数接受一个加减乘除表达式，而且可以混用单位。
E {
border: 10px;
width: calc(75% - 2em);
}
当计算表达式是乘法和除法时，乘号和除号左右必须有个空格。
E {
left: calc(5*10em); /*无效*/
left: calc(5 * 10em); /*有效*/
width: (80% / 4);
}
Sizing Elements
Box Sizing
盒模型有两种，W3C的规范和IE的实现。
| 类型 | 描述 | box-sizing |
|---|---|---|
| W3C规范 | width只是content的宽度，不包含padding和border | content-box |
| IE实现 | width是content的宽度 + padding + border的宽度 | border-box |
E {
border: 5px;
padding: 10px;
width: 100px;
}
如果是IE实现，content的宽度将是70px；而W3C规范，content的宽度是100px。
虽然W3C是规范，但是IE的市场实在是...所以CSS3提供了 box-sizing 属性，来选择使用哪种盒模型。
E { box-sizing: keyword; }
box-sizing 其值可以是 content-box, border-box，默认值是 content-box
Intrinsic and Extrinsic Sizing
下面来介绍CSS3的新方式，来设置元素的 width 和 height，依赖于元素的子元素(intrinsic)或是父元素(extrinsic)的宽度和高度。
下面介绍的属性值都可以应用于 width 和 height，以及他们变体min- 和 max-。
以width为例：
E { width: keyword; }
-
max-content and min-content
intrinsic sizing，依赖于子元素的宽度，max-content设置元素宽度为其子元素宽度的最大值 ，min-content设置元素宽度为其子元素的最小亮度。
目前测试Chrome42和Firefox38都需要加上厂商前缀。
-
fit-content
intrinsic sizing，元素将尽可能包含其子元素，如果达到了最大宽度，则子元素内容换行。听起来，有点像max-content，其实有区别，看下面的例子。
<div class="container">
<img src="samo.jpg">
<p>萨摩耶犬（Samoyed），别名萨摩耶，原是西伯利亚的原住民萨摩耶族培育出的犬种。有“微笑天使”的称号，一岁前调皮、灵动。</p>
</div>
img { width: 200px; }
/* p { width: 500px; } */ /*注意这里不要为p元素设置固定宽度，否则min-content不起作用！*/
来看下面三种效果：
div.container{ width: -webkit-max-content;}
div.container{ width: -webkit-min-content;}
div.container{ width: -webkit-fit-content;}
可以看到
fit-content，当到达浏览器窗口边界时，文字显示不下会换行；而max-content，不会换行，出现滚动条。
-
fill
extrinsic sizing，被设置此属性值的元素，其宽度将撑满其父元素的宽度。 浏览器支持的不太好...
p { width: fill; }
此文是对《The Book of CSS3 2nd edition》第16章的翻译、理解和归纳，方便以后查阅。
感谢其作者Peter Gasston !
