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 通常是字体尺寸的一半)

来看个元素嵌套例子，

  • 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。

    Viewport-Relative Units

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



    。。。 



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



    萨摩耶犬(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，不会换行，出现滚动条。

    fill

    extrinsic sizing，被设置此属性值的元素，其宽度将撑满其父元素的宽度。 浏览器支持的不太好...

    p { width: fill; }

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

    感谢其作者Peter Gasston !