61.尚硅谷_css3_复习.wmv原创

那我们今天应该是我们的第六天了吧，OK，那我们来看一下我们第六天的一些东西啊，照样啊，国际惯例，我们要把第五天的东西来复习一下，OK，那第五天这个版本的复习的话，我们就从这个捋一捋上面去加吧，好吧，啊捋一捋东西太多了，主要是。OK。好，我们来看一下。好啊，这是我们讲的一个Lex的一个，捋一捋吧，是不是OK，我们回忆一下啊，就是前天啊，我们在课上的时候，我们上来其实做了一个很重要的事情。啊，一个什么事情，大家还记得吗？啊，前天我们啊，前天我们不光学这个Fla吧，是不是我们做了一些动画的一些运用，是不是OK啊，我们来看一下在做动画应用的时候的话，其实我们说什么，这里面有一个比较奇怪的一个函数叫什么steps，是不是对这个对这个step是一个什么理解吧，前面是不是跟一个，呃，不应该叫单跟一个number的值吧，是不是OK，后面呢。

跟一个什么start，或者跟一个什么是不是OK，好，那么是相当于把这个动画拆成多少，不是不是OK，我们说这个是我们说相当于给它拆成。啊，看不到吗。我。有吗？可以先看一下旁边的。OK，来看一下我们啊，我们说这个number代表什么，猜成多少步是不是OK，然后呢，我们说这个是大个N的比较多了，是吧，这个是大家的。

看不见第几针？第一针是不是OK？好，看不见第一针摁在那，看不见最后一针。OK啊，那一般我们说当这个number为12的时候，其实我们的动画代号为有多少帧。当为。十二十啊，整个动画应该最好有，整个动画最好有多少帧，13帧是不是好，具体哪一帧不去显示动画里面的内容，你要看你们的star还是end，是不是用star的话，最好第一帧里面把这个东西给它干掉，是不是，如果用end的话，最好把最后一帧给那干嘛干掉，能不能理解，OK啊，这是我们说什么说的一个部署上的一个事情，OK，后来我们就做了两个案例。

两种类型的开机动画是不是这意思啊，OK，那做完这两种类两两种类型的开机动画之后的话，我们就直接就上了，那这两种类型的开机动画的话，需要我们注意什么，就是一些思路，是不是我们做这个2D的，做这个3D的啊，一个波浪那个的话，其实我们就要注意下什么，里面有一个坑，我们什么，这个坑再给你们提一提啊，我放到这边来写我们什么。全是风格吗？不能只能什么，我全只能什么，使用在什么快捷元素上，你松在盘上行吗？不可以啊，这个记住懂不懂，然后的话就是我们动画一些里面的小逻辑了，是不是动画的方向啊，以及它的什么延迟吧，能不讲如何通过加脚本去啊。

控制是不是这样的，然整个动画就出来了啊，这是我们的吧，昨天关关于3D跟动画这块的内容，那后来我们就开始讲是不是好上来，这个是什么，这个是我们什么X的练习吧，是吧，好，那这个练习是比较啊有名的，那其实还有很多flex什么，还有很多flex的练习，大家在网上应该可以去搜到啊，那如果以后要要是对这个flex跟基础点再去进行复习的话，你可以把这个青蛙再来写一遍。没有讲啊，一般当我flex基础点稍微有点忘的时候的话，我就会看出我的文档啊，然后把这个整个青蛙再给他做一遍啊，基本上flex就能从头到尾再来捋一遍了，知道好，那一定要跟着自己的思路去走啊，OK，后来我们讲了flex的一个基础点啊，上来这三条很重要，同学们，什么是容器，什么是项目，什么是主轴，什么是侧轴，这是blackx必须要知道的四样东西。

是不是容器项目主轴侧轴位是在哪OK？好，我们说什么项目永远排列在主轴的正方向上，这句话有没有毛病？没有项目肯定是永远在主轴的正方上面去排列的啊，至于它排列的顺序跟方向，要看你主轴的顺序跟方向是不是啊，OK，那来X分析就两个两个版本，一一个叫一个叫black，最终因为它成为了规范，所以说有什么black这个属性能不能理解啊，OK。好，那我们说这个也是不能漏掉的，我们说一般移动到流量器上面的话，就看它是不是OK，那我说注意点啊，就是为什么要关注老版本的是不是，因为移动端浏览器的那个比较低是不是，然后什么老版本的不是通过两个属性四个属性只控制了主轴的方向，新版本是不是通过一个属性四个属性质量控制主轴的位置跟方向，这里个这个这两个属性叫什么？

We，还有呢？只有一个black direction是不是这样的？OK，那我们再来说那老版本这一块呢？OK，然然后我们是不是就开始讲什么新老版本的一个对比了，从容器的布局方向，排列方向，富利空间的管理吧，是不是？那这些东西应该没有太大问题啊，我觉得这些东西是比较简单的是吧？我们讲到后面的那个计算的时候，可能稍微有点难是不是？可是计算规则给你了，应该也没问题啊，是吧？OK，那大家想想，那我们这边有什么需要补充的？

这是不是只是想到富裕空间这一块，我们说富裕空间只是决定富裕空间的位置，不会去给项目分配空间，是不是那哪个东西跟他不一样的。那。OK，我们说这边我们讲的都是容器上的属性嘛，OK，后来我们是不是讲的项目上的属性是吧，项目上有个什么属性。好，我们这什么弹性空间管理，是不是弹性空间管理分主轴侧走吗。部分属性叫什么，干什么，肯定的干什么，是不是这个叫什么。弹性因子是不是它跟的都是什么number类型的数值吧，是不是拿12345啊是不是我们说哎，那。

新版本有没有有OK，我们说新版本项目上面也是有这个东西的，叫什么。是不是OK么这个啊，这弹性空间管理这几个字一定要知道他的默认值啊，他的默，他的默认值不到。味道OK，他的味道。还是零，是不是OK，默认值也是为零，能不解OK，而且他们俩计算的规则应该比较简单，F的规则看到什么有这个比较重要，我们把这个规则再来什么单独去。列出来02344了吧，是不是OK，那这这边再来个第五个什么，我们说干嘛伸缩规则。

是不是我们说一个是莱克斯。Grow一个是什么？X是不是把课件打开来？好，还有一个是什么。还有什么跟他们有关的，是不是OK，这些都是什么？这些是不是都是我新版本项目上的属性是吧，OK，莱克斯。Lex growle，还有什么Lex base，其实flag base要放在最上面，因为下面的两个规则都是依依靠于我什么贝是不是OK，那我们说哎，这个弹性空间是不是我们叫这个，它的规则是什么样的？来看一下。好，那这边我不知道大家有没有去思考过。

这个可用空间跟我的富裕空间一样吗？这个可用空间跟我的富余空间一样吗？一样吗？啊，这个没有思考过。啊，我们这个可用空间是跟这个有关系的啊，富裕空间是跟外或者有关系的，本质上是两样东西，只不过绝大多数情况下是一样的，是不是，除非你指定了倍值，那可用空间跟富裕空间完全是两个概念，懂吗？所以这边不能叫它富裕空间，叫可用空间。那么理解概念区分区分开，我们说可用空间等于容器的大小，解析所有相邻相一个总和吧，是不是啊，OK，然后呢，这个相当于是所有的可用空间啊，如果没有数字black black space的话，其实就是我们的富余空间是不是？然后可扩展空间是代表什么？代表一个black维度上你所要占据的空间。

因为你是一个因子嘛，当你为一的时候，它所要占据的空间是不是就是个可扩展空间，这个是不是得可右空间除以所有的flex的组合，那不就是一个干嘛所要的一个空间吗？然后你每一项到底要伸缩大小是吗？就是你每一项到底要加多少，怎么办？是不是根据你这个贝这个什么基准值啊，去加上这个可用空间除以你的值。这个应该跟我们的逻辑是一样的，是不是想一想是不是样的OK，好，这个比较简单，是不是OK，那讲到这一块，我们说什么老版本上面的所有的数据全部讲完了。是不是，然后就是新版本上去啊，新增的一些属性了吧，是不是OK，那新版本新新增了哪些。好，这是伸缩规则。OK，五五什么新版本。

新增的是吧，一定按这种套路去记，不然记不住的，OK新版本新增的，OK新版本新新增的，他也分什么容器和项目，是不是想想新版本上容器上面新增的什么内容。容器上面容器我们说我们从来没有管过车走的方向，为什么在老版本里面没有车方向这一说。为什么在老版本里面没有侧轴方向这一说？因为老版本不会换号。他会选择溢出的，怎么着他也不会换啊，就不会有什么溢出，这说不不会有侧走方向，这说新版本我说么，当你的到什么外是吧，当他有的时候，他就会他就会干嘛。

他几个字，三个字，一个叫no，外，一个叫外，一个叫外，如果是他本质上控制的是侧走的方向，是不是的里面有有有几个字，我们看看三个字。是不是OK，我们来看一下这三个字，只有你好，还记得这三个字分别代表什么意思吗？OK，外表代表什么意思啊？什么代表不坏啊，也就是说没有侧轴方向，自己说相当于没有侧走。是不是像是相当于没有车到。能不能理解啊，你测试上面不过去排练任何东西嘛，是不是啊，只不过测试的负吸空间管理是不是还在的是不是，那我们最好也不要说没有测就是外嘛，是不是外行呢？换行是不是这个说换行相当于什么侧折方向有两边。

测图方向是测度方向由上而下。是不是特方向OK外不呢，设方向干嘛有下上是不一旦这个属性，一旦这个属性指挥外跟外如哪一个属性只会失效。想想是本人应该不是想想。如果这个外跟外，如果这个外属性只是外跟外的，哪个属性只会失效。他还有用吗？他他没用了吧，他是他是干嘛压缩一行的吧，你现做什么多好，你去排了他还有用吗？没用。相奈他什么失效？

其实在浏览器引擎内部很简单，你不要是判断一下你这个东西有没有，如果有的话给你自一个来让他失效掉，不就是个加代吗？是不是啊，很容易想象懂不懂啊，虽然说咱们看不到源码啊，你也不要想想着去去扒那个V8引擎的源码，去看反编译V8引擎啊，确实是有是有这种技术啊，可是我建议你们歇歇是不是啊，这不是咱们看懂的东西，我感觉OK来看一下好OK，那到这一块我们说讲的容器上，第一个属据控制四方向的，还有一个数是什么，叫什么it还是叫常，现在我们侧轴浮余空间的管理有几个级别。侧上面富裕空间的管理几个级别，两个三个，三个级别是不是OK？那么来看我们说这边我们说新加人多。

是不是它用来控制什么多行时或什么多行或制什么多练时，什么富裕空间的管理，是不是多行多列式什么什么的富富裕空间管理。侧轴富有空间的关系，是不是你看到这个你就知道肯定是跟什么侧轴有关系的，他会把多行这个多点，它会把多行队列看成一个整体。它会把多行多列看成一个整体，是不是OK，然后我们还讲了一个什么属性，在他们身上讲了一个简线属性，它是谁？两个的简写性跟什么flex web的简写属性。

和克斯外的简写属性，这个是它有什么用，本质上控制什么，本子上控制了什么，主轴和侧轴分别是哪一根，还有什么，以及他们的方向是没有，这是我们说容器上面形成的三三个水平嘛，OK，还有呢，项目上面，项目项目上面形成什么order还有什么。还有什么face是不是新增的四个来看一下嘛，还有一个是我们的结节题嘛，是吧，我们说一个是。Order，一个是a self是不是还有什么，Black是是好，还有什么？还有个是贝是不是，OK，我们先说贝斯干嘛？我们说这是伸缩规则计算的。

基准值。是不是默认干什么，默认拿什么呢，或者什么hat，看组织是哪一个嘛，是不是OK。OK，我们说呢，叫什么意思，收缩因子，收缩因子是不是好之前这个是不是要干嘛，弹性因子啊，是不是，其实他应该稍微叫的。精确一点该叫什么？呃，生长因子啊，这是我们的伸伸缩规则嘛，可是一般比较官方的叫法叫什么弹性因子啊，这个这个嘛，知道去就可以了，懂不懂，那我们说这个性这个词，我问你他的计算规则还跟他一样吗？

不一样，我们说他的计算规则怎么样，好，计算规则还蛮复杂的。分了三步，是不是我是用这种文字的形式给你们？表达出来了，其实你们最好的嘛。把它拆成什么公司是比更加好计啊，我们说收缩他，他是怎么计算的。是不是最终要算一个移速空间，你得从自己身上砍掉多少是吧？他怎么算的？第一步干嘛计算什么计算收缩因子与基准是成的总和。是不是也就是说你先用每一项的去干嘛，乘以什么？这不，什么弗拉克斯性格，什么弗莱克斯什么？

是不是相当是每一项的性格，最终什么不不是什么干嘛。之和吧。是不是是不是我们说每一项什么。每人像flex乘以flex space之和。是不是，这是不是我们拿到什么基准值的一个总和，怎么去计算这个收缩因素的。比如说你上面干嘛，你说写一些什么伪代码，画一个A，等于他是不是可以了，下面这个，下面这个数应该咋说啊。哎，好，哎呀，什么鬼是干嘛，我们什么是不是我们计算每一项的缩因素啊，为什么画一个每一项的伸缩因素，比如说我们挖一个币，他应该等什么。什么莱克斯，美一下自己的莱克性格干嘛？

乘以项目什么基准值嘛，还是F什么被什么去。除以啥除以A嘛。是不是，然后呢，移出空间等于什么，最终你要砍掉的空间，你往一个C嘛，它看等什么，项目的收缩因素是项目素为多少。项目的输缩因为度啊，不就是B吗？B不就是每一项人么，输缩因素吗？去干嘛乘以什么？溢出空间嘛，五为什么加个负的溢出空间代表什么？溢出的意思吗？懂吗？是不是乘以它什么艺术空间，你最终不就拿到每一项的艺术空间了吗？懂吗？那你写一写这些伟大了，比这种文字来的什么好记啊。能不理解，那你在面试的时候也可以去写这个尾代码，懂吗？OK，好，这是我知吗讲的这个伸缩规则吧，是吧，OK，那这个。

默认值为多少？一对它的默认值为一。是不这的是有没有点没有吧，OK，我们说这个饿的说来干嘛呢？决定什么控制什么控制什么控制项目的排列顺序。OK，还有什么是可以控制这个排列顺序的？还有什么是可以控制这个排列顺序的？我们说项目永远在主轴上面干嘛，按照主轴的正方向排队嘛，那哪个属性还能控制到他们一个排列顺序呢？主轴的一个方向吗？什么属性，老版本里面呢，We k-books，这给我先加上杠direction是不是这样的，OK，那再来看，那最终这个干嘛。

是项目干嘛，自身是吗？项目自身富裕空间的管理是不是OK，那我们说项目富裕空间管理是不是有三个，哪个哪个优先级最高？怎么说？看一下这个自身的是不是自身的肯定要比这个什么的U的预定比较高是不？可是我们是不是没有看过这个self是什么。艾伦肯的一个优先级啊，是不是我们来看一下，我们说昨天我们写的DEMO全部拿回来吧。OK，这是CTRLC05的吧？OK，我直接扣成D06。OK，只有你这个就不要了。

好，这个也不要了。好零啊，把flex基础点咱们讲完，OK来看一下，我们说新增里面项目上面是不是有个叫it啊是吧，我们看现在我们说有个order。这样排的是吧，说明这个第一个上面是不是的，是不是现在是几号。你看它的优先级肯定要比这什么来的高吧，是不是，那怎么让它变成多行。宽嘛是吧，改成100。50PX是不是应该就是多行了，诶要换行是不是，你看现在起现在起起作用是不是我的到信号是不是OK，我们要把谁开开来。是不是我们改成Y整理。那下面下面是。

啊，有个简写形式吧，OK，那这个给他做了，那我直接在这边改吧，改成二是吧，就你你看是不是有多行的，是不是我们说多行的时候，负一空间是一个行维度的概念。是不是不是一个整体的概念嘛，所以一掉到最后是不是掉到这边了。这个能不讲是吧，那我们看一下这可什么的，我们为什么。我们来看一下。周年，哎，谁的优先级高？人肯定的就多，行的时候干嘛只听他吧，是不是这意思啊，你看我们这个再来改，我改成什么，真的看行不行。行不行不行，也就是说多行是时候干嘛，只听它单行的时候，Self的有些比要比L。是吗？It才来的高是不是OK，那我这个我们也稍微的总结一下，因为它有几个数据是有冲突的，是不是OK，那最最后再来总结一个点叫什么。

什么侧轴干嘛？负越空间的管理是不是你们经常听到的另外一个概念叫侧轴，在侧轴上如何对齐是不是一样的概念懂吗？OK，我们说这里面总共有几个值啊，一个叫。是不是CTRLC。还有什么aen，什么en self是吧？还有叫什么aen content是吧？他们的区别应该很明显。是不是OK，我们来说一下什么区别啊，如果是这个是什么？单行单列式是不是这个呢。多行多列式是不是OK，还有什么单行单列式，谁的谁的谁的优先级高，它的优先级高，OK，这么一写，整个体系是不是就比较顺了？

有没讲OK，那讲到这一块是不是我都是我们之前讲的东西啊。是不是还有什么需要补充吗？OK，再来补充一个就是什么，现在我们是看了flex的默认值为。多少一？诶，对，Flex值为多少零是不是？Flex是什么？默认值为一是，那fle space呢？默认值为多少？Y跟它的值吧，其实默认值为凹吐，OK，来看一下这个默值是。Contra c。OK，这里来看一下。好完毕扫了该是吧，是他OK。

好是，是不是他才拿外或者还的值吧，没讲OK，那复习到这一块就要结束，是不是然我们说fle案例是不是还没写，还有一个flex的简写属性是不是还没交，是不是OK，这个简写属性及其重要，好，OK，我们来看一下。