第七周 CSS3 长度单位

CSS3引入了一些新的尺寸单位，重点推荐的rem（根em），和em和百分比不同的是它不是与父元素挂钩，而是和文档的根元素（html）挂钩。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

我们在之前的web设计中大量使用了px进行布局，因为早期固定布局使用px较为方便，逐渐养成了这种习惯。
而使用em单位其实更加灵活，，尤其是在修改样式时，只需要修改一下挂钩元素的哪个大小即可，无须修改每一个元素。
默认挂钩元素为父元素。

网页默认字号大小为16px

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
       任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换
算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。


EM特点 
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
 

px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位；
em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
%： 百分比，它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。
这里需要注意的是：em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。如下面示例：

<div style="font-size: 12px">
    第一层
    <div style="font-size: 2em">
        第二层
        <div style="font-size: 2em">
            第三层
            <div style="font-size: 2em">
                第四层
            </div>
        </div>
    </div>


    <div style="font-size: 12px">
        第一层
        <div style="font-size: 2rem">
            第二层
            <div style="font-size: 2rem">
                第三层
                <div style="font-size: 2rem">
                    第四层
                </div>
            </div>
        </div>


</div>
</body>