2.参照父元素高度的元素：height
3.参照父元素属性：font-size；line-height
4.特殊：相对定位的时候，top（bottom），left（right）参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度
可参考《CSS权威指南（第三版）》第220页“百分数和外边距”说明：“百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式发生变化，百分数也会变化”
有两种类型的长度单位：相对和绝对
px就是pixel（像素）的缩写，绝对单位，相对长度单位，相对于屏幕分辨率。
em是相对单位 ，参考物是 父元素 的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。
rem是CSS3新增的一个相对单位 ，但相对的只是HTML根元素 font-size。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
rem在移动端应用可参考淘宝的页面 http://m.taobao.com 或者苏宁的页面 https://m.suning.com/
不是每个地方都要用rem，rem只适用于固定尺寸
页面基准750pxhtml font-size值的计算：
前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果
% 百分比，相对长度单位，相对于父元素的百分比值
相对单位参考如下
使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。
vm、vh、vmin、vmax是一种视窗单位，也是相对单位 。主要用于页面视口大小布局，相对于rem在页面布局上更加方便简单。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
具体描述如下：
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：取当前Vw和Vh中较小的那一个值
vmax：取当前Vw和Vh中较大的那一个值
vh和vw相对于视口的高度和宽度 ， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易实现与同屏幕等高的框。
宽度 width (与高度 height )是在网页布局中经常用到的属性，但作为新手容易会对两者的定义产生误解。下面我们给出 width 与 height 的准确定义：
上述定义很清晰地指出，元素的 width 只是元素 content 内容区的宽度，不包括 padding , border , 与 margin ，即元素的 width 并不表示元素的 可视宽度 。
auto 与 text-align:center 都是在局中排版中常会用到的属性设置，他们很容易被混用，下面我们给出两者的准确定义：
因此，当我们想让一个块级元素在另一个块级元素中居中时(比如 p 在某个 div 中)， text-align:center 是无效的，而可以通过设置 width:auto 或者 margin:auto 实现自动局中效果。
百分比是实现页面自适应的重要途径，而元素百分比的 宿主 到底是谁一直是令人困扰的问题。其实CSS对于百分比的定义十分明确：
至此我们发现， 包含块( containing block ) 的确切定义就显得尤为重要。有时间的情况下会在这篇中进行进一步的补充或新开一篇进行介绍。
