1. auto：相当于1 1 auto，即自动伸长，也自动伸缩，宽度由浏览器决定
2. initial: 默认值, 相当于0 1 auto, 即不自动伸长，但是自动收缩，宽度由浏览器决定
3. none：相当于0 0 auto，即不自动伸长，也不自动收缩，宽度由浏览器决定
4. 如果是一个值：
   1. 如果是一个无单位的数，会被当成flex-grow的值
   2. 如果是一个长度/宽度单位，会被当成flex-bias的值
5. 如果是两个值：
   1. 第一个值必须是一个无单位的数，当成是flex-grow的值
   2. 第二个值可以是：
      1. 一个无单位的数，当成是flex-shrink的值
      2. 一个长度/宽度单位，会被当成是flex-bias的值
6. 如果是三个值
   1. 第一个值必须是无单位的数，会被当成flex-grow的值
   2. 第二个值必须是无单位的数，会被当成是flex-shrink的值
   3. 第三个值必须是长度/宽度单位或者枚举值，被当成flex-bias的值
   4. 占据高度设置

网格布局

网格布局跟Flex弹性布局是类似的，都是css3新出的属性。

Flex主要针对的是单行的布局，一般不会换行。Grid主要针对的是表格类多行布局，可以将其想象成在css中控制类似excel的表格。

相比于普通的html中的table布局，Grid布局一方面主要是在 css 中控制表格效果，另一方面是在合并单元格方面比表格布局会更灵活。

更多跟Grid布局相关的信息，请参考这里

父亲属性

1. display: grid：将父亲设置为表格布局属性，所有其直属儿子都会按照表格方式布局
2. grid-template-columns：将表格分为多少列
   1. 可以直接写100px, 100px, 100px 将表格分为三个 100px 的列
   2. 也可以写 1fr, 1fr, 1fr 将表格均分为三个相同的列，主要 fr 是专门为grid布局新出的一个单位
   3. 也可以写 repeat(3, 1fr) 达到跟上面一样的效果，这样可以减少书写的量
   4. 还可以为每条线命名，这样儿子就可以不用坐标，而用名字来定位，有的时候这样代码会更可读一些，比如
      1. grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
3. grid-template-rows：将表格分为多少行，同上
4. grid-auto-rows：设置每一行的高度，可以用minmax(100px, auto)来设置为最少100px, 最高就让浏览器自己设置
5. grid-auto-columns：同grid-auto-rows
6. grid-column-gap：列与列之间的宽度，一个长度单位
7. grid-row-gap：行与行之间的宽度，一个长度单位
8. grid-gap：如上两个属性的简写
   1. 如果只有一个值，会同时应用到行与列的间距
   2. 如果有两个值，第一个用到行，第二个用到列
9. grid-template-areas：这个是基于命名网格的定位， 在该属性中将所有单元格属于哪个儿子都写出来，详情请参考这里

儿子属性
儿子定位默认是从左到右，从上到下，按照单元格依次排布的。

而Grid属性最大的作用就是可以弹性布局，即合并单元格，每个儿子可以指定自己所占据的单元格的区间。

设置的方式有多种：

1. grid-column-start/grid-column-end/grid-row-start/grid-row-end：这四个属性就对应了横纵坐标轴(注意，是从1开始)
   1. 默认每个儿子只占一个单元格，所以如果只写了start，不写end的话，默认end就是start+1；同样，如果只写了end的话，start就是end-1
   2. 坐标可以设置为负数，即导数第几个坐标
2. grid-column/grid-row的简写，如下：
   1. grid-column: 1 / 2
   2. grid-row： 1 / 4
   3. 可以用span关键字来改为start/start+_span_的方式来设置单元格属性，这样可以专注单元格大小，示例如下：
      1. grid-column: 1 / span 1
      2. grid-row: 1/ span 3
      3. 效果跟上面两行效果是一样的
3. grid-area属性，如下：
   1. grid-area：1 / 1 / 4 / 1
   2. 该属性是按照 上/左/下/右 的顺序来写的，跟margin正好是反方向的

表格布局

表格布局是很老很早的布局了，其布局结构主要在html中控制，css中有如下的几个属性来控制表格的行为：

而现在表格一般不用来布局了，主要还是用来做表格类数据的呈现。

1. border-collapse：控制单元格之间的边框是否合并，默认不合并，但是一般都要设置为合并；
   1. 默认为seperate，合并为collapse
2. border-spacing：跟grid-gap类似，设置的单元格之间的间距，如果是一个值就是统一设置，如果是两个值就是先行后列
   1. 如果设置了border-collapse属性，就会忽略border-spacing的属性
3. empty-cells：在没有内容的单元格周围是否绘制边框
   1. show：绘制，默认值
   2. hide：不绘制
   3. 如果设置了border-collapse为collapse的话，就会忽略该属性
4. caption-side：可以在html中用 caption 添加一个标题，然后这个属性是用来控制该标题的位置，是位于表格的上面还是下面
5. top：顶部

6. bottom：底部

7. table-layout：用来设置单元格的布局宽度高度的算法
   1. auto：自动设置，默认值
      1. 某列宽度由没有折行的最大宽度来决定，即使设置了width也没用
      2. 该算法较慢，因为要遍历完所有内容才能决定每一列的宽度，在主要以呈现数据为主的页面中不建议使用
   2. fixed：固定宽度
      1. 跟单元格内内容无关，就跟表格自身设置的高度宽度比例有关

动画属性

animation

animation 属性的动画原理是在一段时间之内修改某个元素的属性，然后浏览器会自动的将修改属性在这段时间之内均匀化，看起来就是一个比较均匀的动画效果了。

最简单的动画就是设置调整位置属性，然后就可以均匀的上
下或者左右移动了。

1. @keyframes

动画的关键帧配置，类似一个函数，将动画的关键时间点对应的属性信息给标注上，配置示例如下：

@keyframes mymove
{
    0%     {top:0px;}
    25%    {top:200px;}
    50%    {top:100px;}
    75%    {top:200px;}
    100% {top:0px;}
}

最终的动画效果参考这里。