在web环境下，用户可以将浏览器窗口设置为任意大小，且CSS需要去适应它。
响应式 —— 在CSS中，这指的针对不同大小的浏览器窗口，用不同的方式响应更新页面的样式。我们要对不同尺寸的手机、平板电脑或桌面显示器多花心思了。
CSS支持一些绝对长度单位，其中最常见也最基本的是像素（px）。较不常见的绝对单位有毫米（mm，millimeter）、厘米（cm，centimeter）、英寸（in.，inch）、点（pt，point，印刷术语，长度为1/72 inch）以及pc（pica，印刷术语，长度为12 points）。
以上的长度单位都可以直接转换成另一个单位：
1 inch = 25.4 mm = 2.54 cm = 6 pc = 72 pt = 96 px。
CSS是通过迟邦定（late-binding）的方式把样式渲染到web页面上的：内容和它的样式会在各自的渲染完成之后再合并到一起。比起其他类型的图形设计，这给设计过程添加了它们没有的复杂程度，同时也赋予CSS更强大的能力 —— 一个样式表可供成百上千个页面使用。
em :
em是最常见的相对长度单位，这是排版中使用的一种度量方式，基准值是当前元素的字号大小。 在CSS中，1em表示当前元素的字号大小，实际值取决于在哪个元素上应用。
1） ，把各个方向的padding的值设置为字号大小
把padding赋值为1em，乘以字号，得到一个值为16px的padding渲染值。使用相对单位声明的值会由浏览器转化为一个绝对值，我们称之为计算值。
如果同一个元素的另一个选择器，用一个不一样的字号值去覆盖它，这会改变em在这个域下的基准值，那么padding的计算值也会相应变化。
在设置padding、height、width或border-radius等属性时，使用em可能会很方便，因为如果它们继承了不同的字号大小，或者用户更改了字体设置，这些属性会均匀地缩放。
2），对font-size使用em
在font-size上的em会先从继承到的字号大小衍生出来。
<body>
We love coffee <p class="slogan">We love coffee</p>
</body>
body {
font-size: 16px;
}
.slogan {
font-size: 1.2em;
padding: 1.2em;
background-color: #ccc;
}
slogan字号：19.2px slogan间距：23.04px
如果你已经知道以px为单位的基础字号大小，但希望把它改用em声明，下面有个简单的计算公式：
目标em值 = 目标像素值 / 父元素（被继承元素）像素值。
3），字号收缩问题
当你多层嵌套列表，而每一层声明的字号大小以em为单位，字号收缩现象就会发生
body {
font-size: 16px;
}
ul {
font-size: .8em;
}
<ul>
<li>Top level
<ul> 1
<li>Second level 1
<ul> 2
<li>Third level 2
<ul> 3
<li>Fourth level 3
<ul>
<li>Fifth level</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
每一个列表的字号大小是0.8乘以父元素的字号大小。这代表第一个列表的字号大小是12.8px，嵌套的子列表字号大小是10.24px（12.8px * 0.8），第三层列表的是8.192px，如此类推。同样地，如果你给字号大小的赋值大于1em，相反，文字的字号会一层层变大。
纠正：
ul {
font-size: .8em;
}
ul ul {
font-size: 1em;
}
嵌套在列表里面的列表，应该把字号大小设定为跟父元素一样
如果你不是一个比较小心的人，你应该远离em。使用em作为padding、margin和元素缩放效果的单位挺好的，但当em遇上font-size时，事情可以变得很复杂。