由于昨天的node代码没有同步过来，

那么，

css 就会提到布局，下面说几个常见的问题点，

1px问题
适配iPoneX齐刘海
图片自适应

可以放在这儿，作为扩展。本篇笔记不在谈论这个问题。
面试题：%相对于谁
解决水平垂直居中的方法，比如flex方法，但是这里提出absolute + transform 方案：

.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

我们用到了不止一处%单位。事实上，上述代码中的%还真具有不一样的计算规则。第一处50% 是指.wap相对定位元素宽度和高度的50%，而 transform 中的50% 是指自身元素的宽高的一半。

那么在CSS中，常见的%单位有着什么样的规则呢？这也是一道很好的题目，我们在这一部分进行梳理。

position：absolute 中的%

position absolute 的元素，我们把这个元素的祖先元素中第一个存在定位元素成为参照物元素，其中的%是相对于参照物的，left相对参照物的width，top相对于这个参照物的height

position：relative 中的%

对于设置相对定位position relative 的元素。%的数值是相对与自身的，left相对于自己的width，top相对于自己的height。

position: fixed 中的%
对于设置固定定位position fixed的元素，%的数值相对于视口的, left 相对于视口的width，top相对于视口的height。

margin 和 padding 的 %
margin 和 padding 当中的% 非常特殊，它是相对符元素的宽度。没错，margin-top：30%，相当于父元素宽度的30%

border-radius 的 %
想想我们经常对一个正方形元素设置：
border-radius： 50%
得到一个圆形，因此我们不难发现这里的%也是相对于自身宽高的。

background-size 的%

background-size 的百分比和border-radius 一样，也是相对于自身的宽高。

transform：translate

transform 的translate 属性% 是相对于自身的宽高，这也是我们上述代码能够实现居中的原因

text-indent 的%
text-indent 这个属性可以设置首行缩进，当使用%时，它是相对于父元素的width。

font-size 的 %
相对于父元素的字体大小

line-height 的%
line-height 设置行高时，如果单位为%，则相对于该元素的font-size 数值。

这些就是我们常见的使用%的情况，比较的灵活多变，具体的细节都可以在CSS 规范中找到，要求开发者的是了解常见的以及特殊的 % 场景。

深入：flex 布局 和 传统 float 布局性能对比
讨论话题，关于性能
flex布局对性能的影响力主要体现在哪方面？

这个问题比较“偏门”，

我们可以先思考一下 flex 布局对性能到底有什么影响， 或者有多大影响。

首先性能问题一定是一个相对概念，flex 布局相比正常的 block layout（non-float）性能开销一定更大，算法布局，

flex 布局比正常的 block layout（no-float）性能开销一定更大。事实上，block layout永远都是single-pass，算法进行布局，而flex布局却总会激发multi-pass codepaths 算法布局。比如常用的flex-align：stretch 通常都是2 - pass。天生的短板基因决定的属性.（关于single-pass 和 multi-passcodepath，图形学问题不在展开，但是single-pass 成本肯定更低）

最后，布局性能的开销，一般直接考虑如下因素：

需要布局的元素数量

布局的复杂性

相对地，对于布局性能建议主要有：

应尽可能避免触发布局（layout / reflow）

避免强制同步布局和布局抖动