我是 PHP 程序员

    <!-- px: 像素,绝对单位, 1in = 96px -->

    <!-- em,rem,vh,vw: 相对单位 -->

    <style>

        html {

            font-size: 10px;

            /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */

            /* 因为一个页面,只有一个根元素, html */

            /* 1rem = 10px */

        }

        div {

            /* font-size: 32px; */

            /* 1em = 16px */

            /* 32px = 2em */

            font-size: 3rem;

        }

        div span {

            /* font-size: 2em; */

            /* 2em = 2*16=32px */

            /* 但是 em在父元素中被重新定义了, 1em = 30px */

            /* 2em = 60px */

            /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */

            /* font-size: 20px; */

            font-size: 2rem;

        }

    </style>

问题集合：

1.  em 和rem相等呗？

答：初始化时, 都相等,因为html中的font-size=16px

2.  rem与px怎么换算？

答：rem取决于你设置的根元素的font-size,如果设置font-size=100px，那么1rem=100px

3.  nth-last-of-type（-n+3）这个例子    这2来说 -1*0=0+3=3  -1*1=-1+3=2，这怎么就对了？

答：

4.   中间能隔开的那个代码是啥？

答：background-clip:content-box;  /*背景裁切*/

5.  nth-of-type(1,2,3)   想直接选中前三个 好像这样写不行 如何操作可以直接就选择多个?

答：nth-of-type(-n+3)

6.  为什么我这设置了宽高200，可打开审查元素里却没有变回200*200，却是692.589*259.985？

答：确认一下，你是否选中.box，若是选中body，数据会有较大差别