73.尚硅谷_less_复习.wmv原创

啊，那按照国际惯例是不是把。昨天的东西我们来复习一遍啊，昨天上来我们是又讲了black啊，Black是不是连连续整了几天啊。感觉啊。两天吧，是不是把这个第一第五来什么复制一份，我们把这个F那块的内容给它填填完整啊，OK，那是等于零六了。好，那上面这个就不用了，这个是我们D0我们时候讲的，OK，那D06这是我们是吧，来一个体系吧，那最终再加一点啊，我们说昨天我们F这块又讲了什么。啊等分布局其实就是fle的简写属性是不是啊，OK，我们说flex简写属性，比如说写flex为一代表什么？为一为一，Space为0%是吧？OK，那这个space的百分比是于谁的？

啊，因为这个百分比的问题啊，可能参照的是。Contain可能参照的是paint books也可能参照word books肯定不会参照books啊，那至于参照这三个当中的哪个books啊，我不希望你们去记它啊，记这个东西说实话有点累，你们讲，而且不一定能记住，懂吗？你就默认认为他们参照的就是啊。外，或者看一下为什么，因为我们大多数开发的时候，我们会加什么斯。S为board books懂吗？一般都是参照1BOOKS比较多一点，懂懂啊，可是这个这块内容的话应该是大差不差，所以说差不多就就是参一包他的外不得包含的就可以了，懂不懂那具体如果要抠的很细的时候，再去看一下回放就可以了，能不理解啊，OK。

好，嗯。那flex v1的时候其实就是我们的什么flex被子为。零是吧，0%，OK，我们的flex grow为1OK，我们的flex为1OK，其实这这就是个什么布局。啊，这个FLEX1你写上去，它其实就是个等分布局。等分等这个输入法不行，分布局是吧？是OK，我们说这个等分布局最经典的应用场景为一，记住它啊，一般等分布局，等比例，等比例布局，只要是有规律的，这种布局用F写极其好写，懂吗？OK，好，那好，讲完这个简写属性之后，我们说后来我们是不是做了一些案例啊，是不是OK，大家来看，其实这个案例大家看昨天我们在做个X案例，我们是不是做个淘宝，我们是不是做了一个这样的一个案例啊，是不是我们昨天用的方法的话，是不是一张张图片啊，你看我最底下是不是有一张。

这个叫什么？精灵图也叫雪碧图是吧？啊，记住它一个名字叫精灵图啊，啊，我们有同学出去面试，说问他精灵图是什么，他说不知道啊。回来一问，精灵图就是学碧图啊，这个不能不知道人没讲OK啊，他有时候也叫CSS精灵啊，没办法，这个名名字逼格就是高啊，OK，那用精力图能不能做？也能做啊，其实我们这边调整它的background的可性不就行了吗？所有的item的图片都用什么，那所有的这个before元素图片都用什么一张呗，调整它的background框喷性是是不就可以了啊，那这个自己去做一下吧，这个我课上就不做了，有问讲OK。

好，那我们再说OK，那这是我们说什么，等分布局来看一下，好，那后来我们讲了啥，Flex捋一捋，OK，那到这边整个flex体系全部出来了。杨讲啊，Flax内容还是比较比较多的啊，可是这一版flax应该讲的比较深入了啊，里面基本上我们能抠的点也抠了，就差到项目里面去运用了，跟你讲你会发现到项目里面去用的时候也很简单啊，OK，只要你能把这些东西给它吃透啊，你用Fla的话应该是会蛮得心应手的，OK，那后来我们又讲了啥？讲的时候我们讲啥媒体查询嘛，我们说讲了什么，跟CSS3响应是有关的，应式的核心是不是响应是布局的核心。什么CSS媒体查询选择器是不是叫什么？

是吧，OK就他是啊，OK这个玩意，问大家这个玩意儿，它后面应该可以跟什么。他们跟跟什么，肯定会有个大括号的，里面是个什么，这里面跟什么规则是不是OK，这里面跟的是规则OK，后面这块呢，其实是可以跟什么。跟媒体类型啊，用end来连接媒体属性，是不是可以再用end来连接媒体属性，是不是一般这些媒体属性都是带条件的，是不是带条件的媒体属性吗？什么条件啊。不是调调在条件啊，媒体属性嘛，是不是OK好带什么条件。

啊面max等于多少是不是？最小值为多少啊，最大值为多少嘛，这都是什么带条件的媒体属性嘛，当然这个and关键字可以什么可以换嘛，是吧，我们说and这些么关键字嘛，是不是，那也就是说我们学这个媒体查询的基础的话，你得搞清楚几样东西，首先你得知道响应式核心CSS媒体查询选择器，它定义是通过艾没来定义的，你看现在你在里面看到符是不是艾。等到原生C话就是支持这种爱的，这也是为什么我们里面第一变量用什么。At let里面定义变量用at，就是向原生CS靠近，因为原生CSS里面是用了at这个符号的，那这个API的话，对于我们前端开发。人员来说的话是比较友好的，因为我们一直会用这个按的懂不懂，你会发现在其他的预存选择器里面，你定一个变量要用。

多了啊，那这个其实就不是太友好了，能不理解啊，OK，好，那么再来看我们说，那你要搞懂这个响应式的话，其实就搞搞懂它三样东西，什么是啊。媒体类型，什么是带条件的媒体属性什么是啊？什么关键字？是不是我们先说关键字吧，关键字这边我们学了几个。四个哪四个。Only还有什么and逗号？记住是逗号，不是能不理解OK是逗号，然后呢，OK only是用来干嘛的？处理什么浏览器兼容问题？是不是他其实就是让老的浏览器失效。

是不是这个only是不是就是老的浏览器失效，因为老的浏览器只读第一个字符嘛，是不是如果你读到彩色名，你如果读到那个彩色迷，其实跟你读不读没有没有太大关系，可是如果一旦你读到了彩色屏幕，那后面的带没带什么条件的媒媒体径是不会干嘛。失效的是吧，一旦失效的话，是不是跟我们原本的设计图就干嘛违背了，那我干脆不让你去用它。有没讲说O点是上这个老的浏览器，让它干嘛失效掉，也就说老的浏览器你就不要做详意识了是吧，你就呈现我一张页面就可以了，懂吗？不会随着我浏览器窗窗口的缩放的话，让你去产生不一样的布局的。懂不懂OK？是来干嘛的，连接什么一条什么。查询。规则啊，这个规则跟我们说的这个CS规则是不一样的，懂吗？我们说的是不是这条规则。

懂吗？这不一样的啊，OK，那最后呢。连接什么多条？查询规则吗？是不是啊，他呢去。是不是就可以了，OK，那来说媒体属性这一块是谁？看一般我们就不要去记它了，因为用的很少啊，还有什么11CDSY，还有什么D。P什么吧，像素比是不是OK啊？哪个玩意儿是不是它OK，我们说它必须干嘛，必须加Y的前缀。

必须加YK的前缀。是不是OK，我们说这个Y代表什么？浏览器的什么窗口尺寸？OKD代表什么设备独立像素啊，你可以认为是设备尺寸嘛，就暂时懂不懂，OK这里这个呢。像素比一般设备都会给你给你提供啊，这个出厂时候就已经给你设置了，对不对，OK，那除了他们三啊，我们说他们三有一个特性可以叫什么。啊，以上三个，以上三个媒体属性可加面和max前缀是不是面积，前缀代表什么？最小值为谁？

是不是max什么最大致位置？能理解啊，OK，后来我们讲那个什么横竖屏切换吗，是不是OK，我们说关于横竖屏切换哪个属性什么。横竖屏切换是谁啊，我给你们讲，我就是讲了啊，他嘛是不是嘛，是不是OK，好它有几个值两个字，一个是代表的，这个代表这个代表横平还是别为什么横平是吧，这很好记嘛，大陆的意思嘛，是不是OK还有什么。竖屏嘛，是吧，竖屏怎么拼的？PP开头吧，P开就没有OK，咋拼来的记不住怎么办？

课件OK，是不是他。OK，这个代表竖屏是不是OK啊，OK，那到这一块媒体属性是别讲了，OK，然后我们说媒体类型里面有，我只需要你们记住三个默认值哦，彩色屏幕以及什么打印预览。是不是就可以了，能不讲记住这三个就可以了，懂不懂，其实我们说这个媒体查询还是比较简单的，只是说这个only逗号N的，你能不能区分开来就可以了啊，可是这一块内容其实蛮是比较难的，那这块内容的话，我们放到移移动端第一天课讲讲像素的时候，帮大家从头到尾干嘛把大家讲讲透没有讲啊，暂时大家就这样去理解，一个是浏览器窗口的计算，一个是设备的计算，一个是像素B，可是做前端的话，对他们三。

的理解不能这么浅，一定要很深入啊，那我们放到最后再来说，OK，那讲完了这个响应式布局的核心，我们最后又讲什么啊，其实还讲了一个多列布局是不是啊，这个东西的话啊，有个印象。啊，我不需要你去记嘛，你用到的时候过来看一下这四个词什么意思是不就可以了，懂吗？OK啊，OK，还有什么，后来我们讲了规范这个事情啊，在有些人眼里极其重要啊，有些人感觉不到，就当清晰一下就过去了是吧？可是你如果能真正的抓住，哎，我们讲规范的时候去get得到我那些点啊，其实对你的这个自学的过程的话，应该是有很大帮助的，我们不可能说哎，我们不可能说哎，一年之后出来一个新的规范，再让你们全部从公司回来啊，再再再再什么回炉干嘛重造一下，那是不可能的吧，所以你要知道规范输入在哪是吧，是，那现在我们规范已经做到什么，S经做到5.2了吧，们是不是已经做到四了啊？所以里面很多规方虽说现在不成熟，可是保不齐两。

两到三年之后，这些规范都要求不起来了啊，在我们那个年代，又是我们那年代啊，在我们那个时候啊，其实这种东西完全没有的。啊，就是我们那时候你说获取个元素接其复杂什么get any by ID，找到这个节点，再去找它的子节点，然后再去找这个子节点的数，兄弟节点接近复杂，你要去找，你要精确的找到一个节点的话，你可能这个什么get按的系列的方法，你要写好几个，然后结块热出来了。

德乐福吗？是不是用多了帮我们去写，是不是跟我们这个快乐式单的很像，是不是就是因为。出来了宽RY这个选择器，就是获取元素属性的这一套东西之后，我们看我们API里面是经新增了query STEM。这两个东西跟杰宽瑞那个核心函数像不像，里面传的不都是选择性吗？拿到数组吗？是不是啊，所以说规范是一直在发展的啊，你看我们之前是没有模块化的东西的，什么叫模块化之后你们会接触到啊，然后我们出来的什么AMD规范，CD规范，GS规范，后来诶，我们的这个1CS规范做不住了，发现没有这个规范的话，确实好像不是很靠谱，后来规范里面就加了ES6里面就加了一个模块化规范input。Export，那诶ES61出来，大家又要去学了，懂吗？啊，所以说随着语言的发展的话，其实我们说你做it的话，一直是在一个不断的学习的过程当中，懂不懂只是看你的学习效率，一开始肯定是很慢的，可是到了后面这个学习效率一定要提上来。

能不能讲OK，不然会落伍的啊，那这个规范这块我们讲了几个规范，HT的规范，CSS的规范，以及GS的规范，是不是OKH规范里面我们说干嘛，我们说什么叫HT5，什么叫HTML啊，是一个什么？是一个强大的技术级几数几是不是，你可以简单的认为HTML5约等于什么？约等于怎么敲出来？约等于敲不出来啊，OK啊，就这样，就差不多这个意思啊，OK，它等于什么？它其实就等于HTML加CSS加JS。

加S等等，OK，它是一个强大的技术集，就是用来丰富我们的。应用丰富我们的web APP丰富我们的外B项目的能不讲OK，那现在里面什么。那什么是CSS3是吧，我们说CSS3其实就是HTML5的一部分，这句话能不能理解了？OK，而且我们什么而且什么，而且现代前端，现代前端中已经没有版本的概念了。已经没有版本的概念了是吗？我们说的什么，我们说这些什么CSS3H5都是什么级别啊，都是级别能不解就是以后再问你CSS4啊，H6啊，其实没有这种东西的，可是你们会看到，诶规范里面有一个字眼叫S，叫CS4，他说的是CSS这一门技术里面某一样东西，它可能到了第四个级别。

懂不懂，比如说我们的选择性里面，是不是看到有第第四个级别的，能不能理解啊，OK，那JS规范我们所有的。比什么ec ma贵CCT这个要死了，OK，走，你还有什么啊啊，其实一开始我们说我们那个年代不就是在我们那个时候的前端对动步操作的要求是极高的，为什么对动幕操作的？要求极高，你发现几块里面是不是都是动操作啊是吧，就是因为我们那个时候啊，我们处理数据都是把后台的数据拿到，然后把这些数据通过动操作塞到他应该塞的地方去啊，比如说获取一个节点拿到他的应tma，然后把我后台。

拿到数据塞进去懂不懂？OK，那现在前端其实已经弱化了对们操作了，因为我们很多框架其实已经把这个操作完全做了，你只要在你的页面上面写几个表达式，很有可能写两个括号。写两个括号，你里面稍微写一个跟后台一模一样的字段的名称，这个数据自动跑进来。讲这就是我们现代化的一些框架在帮我们做事情，弱化这个动操作啊，可是你如如果你想做一个合格的前端，或者说想做一个水平比较高啊，就是有点上进心的前端，这我们操作是必修课。啊，你要搞清楚这操作，你才有可能看懂有源码，看懂react的源码懂吗？OK，好，那这个泵我们说什么是没有规范的，是不是我们说没有规范，建议看什么啊，就是window是吧？是去N里面去看这个什么window对象上面的方法，以及它定义一些什么属性就可以了。

能讲好，那最终我们帮大家去画一张图吧，OK，我们说在我们整个规范里面，我们去看多规范啊，因为多规范是最重要的，因为这个e cns规的规范，我们以后会详详细的给大家去讲啊，125126127懂吗？OK，我们看下这个动规范。好在动规范里面最最最顶层是哪一个接口？这个顶层是哪一个接口，想想。最顶层是哪个接口？Note接口？是吧，我们说为什么我们说在动物里面都叫节点节点。不就是因为你弄的是我的最顶层规范吗？是不是下来是谁？

下来有几个？下来我们说这个红这个线我应该画几条。几条？有就其实我就问你有多少种类型的节点。多墓里面有12种，12种最常见的让你们祭祀种是不OK，我们记住要用什么，其实这个线我要画多少条，12条是不是，可是我们说这这里面最重要的是什么，四个OK。啊，稍微丑一点了，OK，哪四个，首先有一个多门。Do类型的节点是吧，是这是不是一种类型啊。还有呢？还呢文本text还呢属性区别。是不是有这四种类型的节点啊，那我就问你了，Document跟document点播是同一种类型吗？

Document跟document点播是同种类吗？不是，一个是document类型的，叫文档类型的，一个是element类型的，叫元素类型的，他们身上的API能一样吗？不一样，是不是node里面是不是大家都有啊，能理解啊，OK，我们说，而且这套东西是其实是给谁用的。还需。你出去这这给的他没用的啊，其实他应该叫X妙懂懂啊，嗯，这个X庙呢，其实我第一次听见叉庙这个说法，是从小峰老师的嘴里说出来的，当时我就笑疯了，因为我从来没有做过叉没啊，PX也是，我一直叫PX的，从他嘴里出来叫P叉啊，就是可是这种这人确实是可以这么叫啊，自己注意一下啊，好，那我们说下面是什么？

然后。的下面是什么？我们说你这个你这个是给插秒用的呀，我们说我们的HTML比你要稍微了，干嘛狠要要什嘛狠一点啊，东西是稍微干嘛多一点是吧？啊肯定也H比他松散一点啊OK，是不是我们说这块还有什么接口。HTML。Document。是不是它既乘以什么对什么的。这边还有什么。这边下来还有什么。HTML。是不是从HT上面下来还有什么。吗？上面东西多的有，有什么有的。

爱这个还什么，死掉还什么。的，只要你有的节点，我都要继承于我的么？那么讲好以后，让你把这个数画出来画。让你画这个数，你把我这条线一。这条线一定要画出来，懂吗？是最是最重要的，懂不懂，其实看一下文档的话，整个数这四个节点的数应该都可以画出来。能理解吗？看一下文档你就知道了，而且里面也没有什么让你们。让你们这个实质性去理解去背的东西啊，你看一下它的树状结构不就行了吗？随即乘以谁，谁即乘以谁吗？这个能不能理解啊，OK啊，那这四个节点是其实他应该画12条线，懂吗？OK，好，这里这是我们说什么规范上的东西，讲完规范讲完规范讲什么了？月处理器为什么叫预处理器，现在能不能明白？

我们说这个处理是在你。浏览器运行前我们就处理吧，是不是叫预处理是吧，之后我们会学一个叫后置处理器叫。Post CSS这个叫后置处理器，这我们放到之后之后再说啊，这一次我们学的是一个预处理器叫做啊。Less啊，记住你们之前学的都是些原生CSS，真正开发项目的时候就是用这种预数理去写啊，因为它更高效，编码更高效吗？懂懂，我们说预处理器就改，我们讲了什么？讲了第一个是less是不是OK，我们讲了几个点。他有变量，它有。

它有什么一个变量，还有什么最重要的嵌套，还有什么混合，还有什么。计算我们没讲函数吧，是不是，我们说讲的是变量嵌套混合计算吧，是不是OK，其实它还有两个，一个叫还有什么，一个叫继承，这个我们判断什么，今天来讲OK，我们说变量这一块，我们说用什么定义。定义是不是，而且还要注意什么变量的延迟加载。而且在里面变量是。会计作用域有没有接触过作作用的概念？GS里面函数是GS里面的作用是一个什么作用啊？函数作用域吧。是不是OK？我们说在less里面是快计中语，对不对？OK这个概念先有一下啊，之后做高级时我们再来重申它OK，那签到这一块呢？

要注意什么啊，就是一定要注意这个什么，安德代表的是啊，平静。啊，这个评级说的就是什么，靠在一起当中没有空格对吗？OK，那不要小小看这个弧啊，它的作用极大，它可以使你的less写起来写的特别的灵活。OK，混合呢，混合里面东西多了吧，我们说我们讲了普通混合，不带输出的混合，多参数的混合，带默认值的混合，命名参数匹配模式以及。是不是，那在混合这一块，我们知道什么是混合。什么是混合？将一系列的什么规则及干嘛引入到另一个。

另一个规则及总，这个叫混合，你可以记住，相当于我们什么CTRLC加CT很强B，这个好记吧，是量OK，混不合极其强大啊，我们说懂吧，我们说我们学的混合里面，我们说学什么普通混合，普通混合是干嘛，最终会。编译到什么，编译到原生CSS中的是不是，然后学什么在参数的混合不是么？不带输出的混合。怎么才叫不带输出混合不带输出直接叫什么叫双户号？是括号，是不是一般你看到的混合都应该叫什括号，不然你想想可能会出为什么我们混合的定义是不能点的。

比如说我点个点test，这很有可能是不是会选中页面上一个元素的，这就尴尬了，一般就必须加什么括号保险一点。能理解我，能理解我的意思吗？OK，这你。好，然后选什么带参数的混合是不是后来选什么。但默认值的混合是不是好？我们这边再加一条吧，我什么混合的定义在LA规范中有明确的指定。啊，使用点的形式啊，你会发现其实不用点的其实也也可以也可以，有些情况下是不是，可是less规范里面明确定义了，干嘛使用点的形式啊。

来什么定义？好，大家想想为什么要跟着规范去走。为什么好像有我们有些时候不不去使用点的它也可以呢。这里看你编译器支不支持。我们说less，它是不是指定义规范？是不是最终实现，我们说你这个less有用的话，是不是得靠考拉？或者说得靠其他的编辑器啊，不然less是没有任没有任何作用的吧，也就是说考拉内部在实现的时候，他觉得不加点也行。加点也行，是不是？这是考察自己的时间规则吧，如果有些编译器是完全跟照你这个规范走的，那他就有可能干嘛只支持啊。点的形式吧，那对于我们开发者来说的话，你想做到最最最最确保的话，你是不是一定要跟着规范走，因为你不知道编译器它怎么实现的，除非你一辈子只是用这一块。

变1000就一辈子只使用考拉，这是不可能的，到我们后，后面的工程化项目中，我们是完全会抛弃考拉的。你能不能能不能get得到我的点，懂吗？所以说一定要跟着规范去走，哪怕有些编译器在实现的时候自己去做扩展啊，可是不要去相信，不要去依赖这些，这些扩展会对你的项目造成问题的，懂吗？OK，好好，后来我们说他的一个计算能力吧，是不是可以做啊。加减乘除是不是还有一个什么计算的一方。计算的一方带带单位就可以了，计算的一方带单位就可以。是不是啊，多个单位才会学习第一个是吧，OK，那这个混合可可能是不是稍微稍微有点问题啊，我们在讲什么混合的时候可能问题再讲命名。模式不不不叫什么匹配模式吧，是不是再加匹配模式时我们来看看啊，还讲什么AR arguments是不是OK，我们说这个东西稍微稍微什么知道一下就行了，有导他可能在简写属性上面的话，到时候会稍微有点作用，是不是OK，我们看这个匹配模式这块可能我们昨天讲的时候可能看一看。

匹配模式我们在哪找呢？是不是在这边啊，我们讲匹配模式的话，是不是零三啊，看下零三。好input什么，这个来吧，是不是我们说是不是他们又带上。我们来看一下嘛，是不是看它变异的一个结果。是不是03.3SS啊，确实好像没有带上是不是，你看我这里面怎么写的，来看一下我们是不是。分析下嘛，你看这是不是我的业务代码，我说外底下有一个叫三角形的类码，他要使用一个混合嘛，混合的什么匹配模式是阿码，那他是不是去就去找什么，这个S里面的R是不是它，你看它是不是只把这三条样式啊，这个三个规则几个嘛。

拿得过来是不是，我们说你在我在调动的时候的话，应不是不是应该要干嘛。不是应该要带上他的吗？是没有带上啊，昨天这边写快了，为什么？因为他的行参没有。匹配上，这是不是只有一个形象，他们有？几个？参数这个两个嘛，前面那个叫匹配模式，是不是有两个参数的，那你要把这两个参数也给他。对吗？带上CTRLCCTRLB啊，我们再开考拉，我们来看一下。好了，让他起床。好，这个给他。干掉。OK，把这个CSS直接给它拎进来，是不是算一下走OKB是不是又成功了，来看一下03.3，你看是不是就来。

是不是之前看是不是没有啊，我们说干嘛，这里面要注意一下同志们，这个匹配模式里面，如果你加整S杠的话，一定要把这个形态也匹配上了，来看一下这个形态的命名不一样，可不可以。个数一下是不是就行了。是不是啊？能不能理解啊，我们来看一下九年。嗯，改了，你看是不一样的。是不是你CTRLS的时候，它就已经干嘛去重新编译了嘛，懂不懂是没有没有任何问题啊，说这个匹配模式，你要带着这个自动带的这个混合的话，这个型差是不是也要跟他们匹配上。匹配不上，它是不带的。能理解这意思吗？啊，OK，好，那这是我们什么昨天讲的什么？这块东西吧，啊，其实它还有一个很重要的特性叫做继承，今天我们来看一下。这个能不能过？

能不能过那很重要，一定要把它记住。