前言
雪停了，继续读书
outline
很少用到这个属性，可能还有小伙伴们都不知道，在padding外，border外还有个outline，我们称border为边框，而称outline为轮廓。
渐变
首先要明确的是，渐变得到的是图像。
background-image: linear-gradient(to right, #243, #2354e188);
最简单的渐变，一个方向，两个颜色。
出去线性渐变，还有径向渐变等更加复杂的情况：
background-image: radial-gradient(50px, #243, #2354e188);
float
关于浮动这里不会介绍太多，其实用的时候也就float和clear，关于float-shape的属性都很少使用。
但我们要知道的是float并不是为了布局设定的，只不过在那个年代，float可以完成布局的任务，而也没有别的太好的选择了。
position
关于定位，其实我一直和display，float等区分不开，简单的说，定位的原理非常简单，就是相对元素框的常规位置定义元素的具体位置。同时，position的值也就五个：static, relative, sticky, absolute, fixed。
关于absolute，当它的容纳块没有非static定位属性时，它就会基于默认容纳块定位，否则它会基于最近的非static属性的容纳块定位。而一般来说，absolute定位的元素的偏移位置和它的宽高息息相关，如下面：
<style>
body {
margin: 0;
position: relative;
}
.father {
width: 500px;
height: 500px;
background-color: #1ee;
position: relative;
overflow: hidden;
}
.son {
background-color: #33ee3399;
position: absolute;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
height: 100px;
}
</style>
<div class="father">
<div class="son">111asdwwdwf, we will succeed</div>
</div>
这时候有些属性必然会失效，这里发挥作用的还是height。
与绝对定位不同，相对定位即使元素从常规位置偏移开了，但是他原来占用的空间并不会消失。
除去这四种，还有一个我们可能用的不多，却常常看见其应用的粘滞定位: sticky，即我们常见的音乐软件按照姓名首字母搜索时，一个随着列表轮动不断更新的位于首部的标题。通过设置z-index可以设置sticky的优先级。
flex
关于弹性布局，我已经在前文中谈过了，这里也不详细介绍，但是毫无疑问这是目前应用最广的布局方式。
可能有人疑惑align-content和align-items的区别，关于align-items，其实和justify-content属性是不相似的，一个是主轴，一个是副轴，他们做的工作其实并不相同，因为这是一行弹性元素的主副轴的体现；而align-content其实更适合和justify-content登对，因为它是多行弹性元素在副轴上的justify-content，但是为什么我们更多的去使用align-items呢？因为我们实际使用时并不会经常出现多行弹性布局，自然align-content也没有用武之地。
关于align-items中的baseline和flex-start之间的区别也是主要集中在边距。而同时还有个困扰人的属性align-self则是应用在单个元素的align-items属性，你甚至可以把它当作align-item。
同时float并不会浮动弹性元素，然而position: absolute却可以把元素从原来的文档流中排除。
刚刚我们所讨论的大都是弹性容器的属性，但是实际上弹性元素也有很多flex相关的属性，如我们熟悉的flex属性。
标准意义上的flex属性和RN中只有一个值的flex自然是不同的，这三个值分别代表增加占比，缩减占比，基准值。如同我们想的那样，如果设置了基准值，在基准之上的值会按照增加占比分配，同理缩减占比也是这样。
关于flex的几个简写，见下：
flex: initial;
flex: 0 1 auto;
flex: auto;
flex: 1 1 auto
flex: none;
flex: 0 0 auto;
flex: 0;
flex: 0 0 0
关于flex-basis，我们要清楚的是auto和0是完全不同的，如果我们设置为auto，只有多出来的空间才会按照比例分配给弹性元素，而如果我们设置为0，全部空间都会被用来按照比例分配。
