先介绍个小知识点：包含块
包含块是指祖先元素的内容区域，但根元素(html)没有祖先元素，它的包含块是当前视口。
*百分数%一般会用在以下6个场景中：
# 一.定位(position)
偏移属性left和right参照的是包含块的宽度。 偏移属性top和bottom参照的是包含块的高度。
- 不同情况下的包含块：
1.position:static/relative的包含块是离它最近的块(block)、行内块(inline-block)和单元格(td)祖先元素的内容区域。
2.position:fixed的包含块为当前视口。
3.position:absolute的包含块为离它最近的position≠static的祖先元素。
# 二.宽(width)和高(height)
width：参照包含块的宽度，height：参照包含块的高度
- 高度的百分比计算：
1.非根元素包含块：若没有明确定义高度，子元素高度就像失效了一样。
若定义了高度，则可计算出子元素的高度。
2.根元素包含块为当前视口，值总会有效。
# 三. 外边距(margin)和内边距(padding)
外边距和内边距参照的都是包含块的宽度，并没有参照高度。
# 四.边框圆角(border-radius)
border-radius参照的是元素自身的尺寸。
# 五.位移(translate)
元素可进行水平(X轴)或垂直(Y轴)方向的位移，X轴参照元素宽度，Y轴参照元素高度。
# 六.字体大小(font-size)
a. 字体font-size参照父元素字体的大小；
b. 行高参照自身字体的大小