平时开发web应用是做页面布局时候写css总是要百度一番，比如如何居中、如何滚动，等等，闲着没事，学习一下css总是好的。
Gradients 渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
.demo{
background: linear-gradient(direction|angle, color-stop1, color-stop2, …);
}
directio | angle 线性渐变的方向，例如： to right ， to left， to bottom right，也可以是一个角度。
color-stop# 线性渐变的颜色，至少需要两个颜色。也就是说需要至少有 color-stop1, color-stop2。
径向渐变（Radial Gradients）- 由它们的中心定义
.demo{
background-image: radial-gradient(shape size at position, start-color, …, last-color);
}
shape 径向渐变颜色区域的形状 circle（圆形）或 ellipse（椭圆）
size 参数定义了渐变的大小 closest-side farthest-side closest-corner farthest-corner
at 固定搭配 shape size 来表示在一个位置 position
position 径向渐变的起点位置
start-color 径向渐变的颜色至少需要两个颜色
flex 弹性盒子布局介绍
flex 布局也叫弹性布局，它的特点是可以实现子元素的自适应屏幕大小，可以自由的分配每个 box 需要占用的空间比例。我们把父元素称作为：容器。子元素称作为：项目。容器默认存在两个轴：水平主轴（mian axis）、垂直交叉轴（cross axis）。左侧是主轴的开始点，右侧是主轴的结束点，垂直方向上顶部是交叉轴的开始位置，底部是交叉轴的结束位置。
flex-direction 排列方向 column 、 row
justify-content (轴内)对齐方式
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
align-items 竖直方向对齐方式
stretch 默认值。元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
baseline 元素位于容器的基线上。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
align-content 多轴对齐
Grid
通过设置 display: grid; 可以定义一个 CSS 网格。然后使用 grid-template-rows 和 grid-template-columns 属性来定义网格的 columns 和 rows。
calc 计算属性
float
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
position
relative
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
absoult
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
overflow
属性指定如果内容溢出一个元素的框，会发生什么。
overflow-y:
overflow-x
visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。
no-display 如果内容不适合内容框，则删除整个框。
no-content 如果内容不适合内容框，则隐藏整个内容。
align-items justify-content align-content 区别
align-content ：设置同一列子元素在Y轴的对齐方式
justify-content： 设置同一行子元素在X轴的对齐方式
align-items：设置同一行子元素在Y轴的对齐方式
align-self：与align-items相同，其中align-items属性用于弹性容器，而align-self用于弹性项目
子绝父相
相对定位（relative）：相对定位是相对于自身位置进行偏移。当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不 会被下面的DIV块挤占，而是空在那里；当偏移后向下或者向右的内容会被隐藏，而 这一点区别于绝对定 位，绝对定位会出现滚动条。
绝对定位（absolute）：绝对定位是相对于父容器中含有定位属性的元素进行定位（直接父容器没有他会一层一层往上找，没有的话就相对body）。一个DIV块的位置被定义为绝对定位的时候，也就意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替它的位置。
固定定位（fixed）：固定定位是相对于浏览器的位置进行偏移。当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不 会被下面的DIV块挤占。
子绝父相：子元素绝对定位，父元素相对定位。让子元素 以其父元素为标准来定位。（如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。）
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。