看看下面的例子：
代码：
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
.grandparent {
position: relative;
width: 200px;
height: 200px;
background: #eaeaea;
}
.parent {
width: 100px;
height: 100px;
background: #aaa;
}
.child {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
background: red;
}
在上面的例子中，我创建了 3 个嵌套 div，它们是具有以下特征的3个正方形
- 最外面的组元
div是一个浅灰色，大小为4x4 - 父元素
div的颜色为深灰色，大小为2x2 - 以及分配
50%大小的红色子div
如果百分比单位以父级为来源，则子级的大小应该是它的 1/2，但上面的不是，子级的大小实际上等于父级，也就是祖父级的 1/2。 原因是祖父级 div 是子级 div 的真正包含块，因为子级具有 position: absolute ，对应于在祖父级中设置的 position:relative 。
因此，为了确定哪个是元素的实际包含块，它完全基于元素本身的 position 属性。
但是，对于某些属性，百分比单元的引用源既不是父块也不是包含块，而是它本身—— 自身元素。
百分比的属性
width/height
如上面的例子中看到的，当一个元素为其宽度分配一个百分比值时， width 是基于包含块的width, height 是基于包含块的 height。
padding
对于 padding，垂直（padding-top/padding-bottom）或水平（padding-left/padding-right）都是基于包含块的 width 来计算。
来个例子：
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
display: inline-block;
background: red;
padding-top: 50%;
padding-left: 50%;
}
.parent {
position: relative;
}
在这个例子中：
- 父
div的大小为6x4。 - 子
div的大小为0，但padding-top和padding-left分别为50%
最后的结果是，子元素的大小相当于父级元素 1/2宽度，也就是一个 3x3 的正方形。
margin
与 padding，margin 的百分比(垂直和水平)也是相对于包含块的宽度来计算。
来个事例：
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
display: inline-block;
background: red;
width: 50px;
height: 50px;
margin-top: 50%;
margin-left: 50%;
}
在这个例子中：
- 父级
div的大小为6x4。 margin-top和margin-left分别为50%
其结果是，子元素被定位在离父级元素的上边距和左边距3个单位的地方（父级宽度的1/2）。
top/bottom/left/right
top、bottom基于包含块的height来计算，left、right 基于包含块的width来计算。
来个例子：
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
position: absolute;
background: red;
width: 16.67%;
height: 25%;
top: 50%;
left: 50%;
}
在这个事例中：
- 父级
div的大小为6x4 - 子元素有
position: absolute，top和left分别为50%
最终结果，子 div 被定位在离父 div 的顶部边缘 2个单位的位置（父 div 高度的 1/2），并被定位在离父 div 的左侧边缘 3 个单位的位置（父 div 宽度的 1/2）。
transform: translate()
一个用于动画/过渡的不可思议的属性，它也支持百分比值。然而，这个属性并不指其包含的块，而是指其自身。
来个例子：
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
background: red;
width: 100px;
height: 50px;
transform: translate(50%, 50%);
}
在这个事例中：
- 父级
div的大小为6x4。 - 子
div的大小为2x1，使用transform: translate(50%， 50%)
最后结果，子 div 被定位在离父 div 的顶部边缘 0.5 个单位的位置（自身高度的 1/2），并被定位在离父 div 的左侧边缘 1 个单位的位置（自身宽度的 1/2）。
background-size
background-size 属性将百分比单元的复杂性提升到一个新的水平
此属性的百分比值指的是背景定位区域，类似于包含块，但添加了以下 3 个因素：
- 只有内容的块(
content-box) - 带有内容和
padding的块 （padding-box） - 带有内容、
padding和border的块(border-box)
这三个值是由 background-origin 给出，具体看 MDN :developer.mozilla.org/zh-CN/docs/…
来个例子：
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #eaeaea;
width: 300px;
height: 200px;
}
.child {
background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png);
background-size: 50% 50%;
background-repeat: no-repeat;
background-color: red;
width: 50%;
height: 50%;
}
在这个例子中:
- 父
div的大小为6x4 - 子
div的大小为3x2，没有padding，没有border - 这里使用了一个DEV logo(比例为
1:1)作为子div的背景图像，背景大小属性设置为50% 50%
其结果是，背景图像被拉伸为 1.5 x 1 的大小。
background-position
与 background-size 类似，background-position 属性的百分比也依赖于背景定位区域。
在这个例子中:
<div class="parent">
<div class="child"></div>
</div>
css
刷面试题
刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。 开源分享：docs.qq.com/doc/DSmRnRG…
