VALUES AND SIZING

CSS参考手册

Relative Length Units

在CSS2.1中，相对长度单位有：em，ex ，CSS3中加入了 rem。
rem，root em。 em是相对于当前元素的字体大小，而rem是相对于根元素(html)的字体大小。
一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半)

来看个元素嵌套例子，


    Western gorilla
        
            Western lowland gorilla
            Cross River gorilla
        
    


li {
    font-size: 2em;
}

第一级li元素的字体大小是2em，通常浏览器的默认字体大小是16px，则其字体大小是32px，第二级li元素的字体大小是2em，两倍于当前元素的字体大小，就变成了64px。

li{
    font-size: 2rem;
}

如果设置为 rem，则两级li元素的字体将都是32px。

当构建响应式布局时，习惯使用百分比，百分比适用于顶级元素，对于嵌套的元素，使用百分比就会碰到问题。


    
        。。。

.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中的最大值和最小值。

CSS3可以计算长度值了，通过 calc() 函数，该函数接受一个加减乘除表达式，而且可以混用单位。

E {
    border: 10px;
    width: calc(75% - 2em);
}

当计算表达式是乘法和除法时，乘号和除号左右必须有个空格。

E {
    left: calc(5*10em); /*无效*/
    left: calc(5 * 10em); /*有效*/
    width: (80% / 4);
}

盒模型有两种，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

下面来介绍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，其实有区别，看下面的例子。

    
        
        萨摩耶犬（Samoyed），别名萨摩耶，原是西伯利亚的原住民萨摩耶族培育出的犬种。有“微笑天使”的称号，一岁前调皮、灵动。

img { width: 200px; }
/* p { width: 500px; } */ /*注意这里不要为p元素设置固定宽度，否则min-content不起作用！*/

来看下面三种效果：

div.container{ width: -webkit-max-content;}

max-content

div.container{ width: -webkit-min-content;}

min-content

div.container{ width: -webkit-fit-content;}

fit-content

可以看到 fit-content，当到达浏览器窗口边界时，文字显示不下会换行；而 max-content，不会换行，出现滚动条。

p { width: fill; }

此文是对《The Book of CSS3 2nd edition》第16章的翻译、理解和归纳，方便以后查阅。
感谢其作者Peter Gasston !