66.尚硅谷_css3_多列布局.wmv原创

啊，那那我们C3到这一块响应是布局核心媒体上去其是不是也讲完了啊，明天我们来会说一个响应式框架，不是算法啊，然后它里面最核心的跟响应式有关的是它的三个系统啊，最难的也就是三系统啊，其他东西都是CTRLCCTRLD就可以拿来玩的，能不能讲OKUI库我们来看到底怎么用啊，极其好用，然后来讲最后一个叫做多列布局，也叫分栏布局啊，这个语法极其简单，我们看一下就行了，而且它使用场景也不多啊，我开发到现在的话也没怎么去用过它啊，可是它确实是。C3里面出来的，那这两这前面讲的这两个布局类型极其重要，懂不懂，那一般我们像在我们的面试题啊，像我们的CSS的Miss会让你写一个三列布局，是不是那么两边固定当中自识页中间列优先加载，是不是会让你去写一个这样的东西，然后他会让你说，哎，让你写一个兼容性比较强的，让你写一个什么。

最简单的或者用flax给去什么写一个懂不懂，那所以说遇到这些面试题的时候的话，一定要干嘛，结合我们写的基础点，把它搞得稍微深入一点，懂不懂，一旦面试当中遇到这种机会，抓住这个点啊，然后散发开来啊，让别官觉得哎，你是一个有思想就是有体系的一个人啊，这样的话可能会对你的面试会会会有一个比较好的帮助啊，那么来看下这个多列布局，那讲完这个多列布局之后，那下午第一节课啊，本来要讲less的，那我放到第二，第二节课再来讲less啊，那第一节课我们先来讲规范。啊，就大家学到现在都不知道你们学的东西都出自于哪，而且很多人都都很有可能都没有去看过啊，HTL规范，CSS规范以及DS的规范，那GS规范分三种，Ecna规范，Boom规范以及boom啊，其实没有规范。对吗？OK，全靠那个window对象，靠浏览器自己去扩展了，能不讲OK，那这些东西我们放到下面再来说啊，那上午我们把最后一件事情干掉了啊，多栏布局啊，或者叫分兰布局，或者叫多练布局，好来看一下这个。

OK。好多留好，怎么玩呢？嗯，比如说那个index点吧，零一吧。OK，来看一下，比如说我来还要来个外WI来个外，嗯，来个什么鬼，来个外干嘛。来个什么，来个div是吧，来个外是吧，比如说稍微写点字啊，比如什么城市套路深是吧。城市，城市套路深，套路套路不平，城市套路深，我想回农村，是不是农村路更滑人心更复杂，是不是农村路更滑人心？

懂吗？更复杂是不是来我们把这个东西稍微搞大一点圈啊？C啊，再来一份吧。好，来个几几点是不是这样的，OK，来看一下，我们说现在啊，现在这样很正常是吧，是因为干嘛我们没有写任何样式嘛，是不是来我们来写定样式啊，那默认的工作给它做掉是是我们就要马为零啊，这叫CSS什么下什么，我们说现在这种是不是我自己写的。

啊，其实我们说应该是干嘛。有一个点CSS是吧，是不是有个官网，我们叫什么。早早往这走，嗯，我不用这个浏览器好来打开啊，有个官网叫做3W点什么research css.com。好。来，走起来。呃，这是国外的一个站点，好像是稍微有点慢啊，这个站点会给你一套他们团队所维护的，就下载CSS的代码啊，这一套下CS代码是一直在更新维护当中的，懂吧，你可以上去下啊，这个让他稍微跑一跑，待会我们自己来看，那现在我们是不是都是我们自己写的。是不是，而且我们写的极其简单吧，粗暴是吧？OK，那我们来看一下这个多立物体，它它长什么样，来个比如说来个。

600PX是吧，OK，然后呢，高度不管了，靠你们增加嘛是吧，然后给个啥呢。居中吧，走你来看一下，嗯，给个边框，最好给个边框。看一下实心是吧，来看一下。嗯。下一跳你看是不是这样的，是不是啊，OK，比如说干嘛，现在我们说多列布局，来看一下多列布局怎么玩的，多列布局有个叫栏目宽度什么意思啊，有个叫它来指定栏目宽度啊，好来看一下周，你比如说现在我整个宽度是不是600啊，我说你的栏目宽度为200，应该分成几发，好像应该分成三分吧，看他分成几分。为什么分成四份两份为什么，因为你是200嘛，是不是他们自己之间还有空。

空隙的，所以你不可能完全分成三分的啊，其实你写300它也是。几百。一份。是不是你有空隙的嘛，你300乘以二正好等于600嘛，不可能的，对不对，OK，比如说我写100，那就应该有。五份12345嘛，是你不可能分成六份啊，六乘以100干嘛，你是不是自己之间的空隙都没了，懂不懂，OK，你说这种好吗？不好，API不友好是吧，那一般这种API我就不用，那怎么办？我就直接告诉你列数。是不是OK干嘛？嗯，列出卷吗？看的是吧，我直接告诉你给我分成几天，不是拉倒了吗？是吧？啊，我直接告诉你给我分成几点。C比如说我告诉你给我分成五刷一下。

那就是五点是不是我告诉你给我分成。三列那就是三列，那不讲OK，告诉你，告诉你分成一列。那你就给我们这一列狠不狠，OK，是不是特别牛，只要你分成两列，那就是两列嘛，是吧，那还有两个比较鸡肋的属性栏目间距啊，现在这个栏目间是不是它自动的来看一下来一个栏目间距。Con。比如说栏目间距为30P90，那这个栏目间距可能会稍微大一点。你看是不是就稍微大一点了是吧，40是不是更大一点。栏目间距更大。是不是OK，还有什么，还有叫栏目的。分割线。入了，是不是找你来个什么？分割线有什么实心的是吧，看行不行。

是不是就出来了，或者你可以给它指定什么EPX的实心了，这里是不是更细那么讲，看他们指定颜色。红色小印。是不是红色跟薄的差不多吧，感觉是吧，简不简单，完了讲完了。啊，只需要你知道这四个音就可以了，而且一般不用，没有什么应用的场景啊，很少，除了那种什么新闻列表，里面肯定会就是文字，有大量文本的时候，可能会是稍微去用用吧，可是你会发现有大量文本的时候，我压我压根就不希望有框吧，懂吗？就说运用场景比较少啊，可它确实是C在里面提供出来一种新的布局形式，能不理讲OK，有点像表格吧，可是比表表格要好很多。对吗？OK，那哎这个站点。死了。

啊，应该正常，国内应该是可以访问的。啊。啊，那这个之后我们再来看啊，啊OK，那到讲到现在C3全国讲完啊，OK，所谓的来回顾回顾里面一些比较重要的东西啊，选择性很重要是不是啊，我们在这一块我们讲了什么。讲了一些基本的选择器，C3新增的选择器最重最最重要的是是米的。优先级是不是，这跟你之后去写一些CSS的话，就是你到底能不能明白哪一条样式起作用，哪一个声明起作用，这个关系很大，懂吗？OK，还有一个就是我们一定要知道CSS选择器的读取顺序，从右往左，一般我觉得这个东西是会必问的，那么你讲OK，那后来讲了一个自定义字体，这个也重要，开发当中我们也经常用，也就说这两个东西必须要给我掌握，懂吗？OK，自定义字体我们说它有很多好处吧。

是不是可以使用在线字体可以去干嘛，可以减少网络的一个负担嘛，是不是OK，我们再来看新的UI方案里面是不是，这里面其实有些东西是很重要的，有些东西你可以干嘛，就是你可以先把它放弃，以后用到的时候再可以来看的懂吗？就是你自己对这个知识点一定要分个级别，能不讲，那这里面像哪些是比较重要的啊，这里面东西啊，其实。都不是太重要是吧，而且比较重要的rgba和C点应该都不用记。是不是OK，那和模型里面啊不三页。很重要，能不能解这个东西是一定得知道的，那形增原里面圆角很重要，背景很重要，那这个里面这几块东西，Book s圆角，背景这三块东西是必须要掌握的，就说这三个东西是你摔跤眼应该干嘛摔不掉的东西，对不讲啊，其他东西说你忘了啊，可以让你忘，因为其他东西我也会忘。

懂吗？可是其他东西你过来看一下API，几分钟就应该给他捡回来，而且立马能想到，哎，它里面有哪些坑，我用这个东西我做过什么？有没有理解，OK，那这是我们新的UI方案，OK，那讲完新的UI方案之后，这三个东西。啊，不要说了，摔都摔不掉的东西应该过度，2D3D变形以及动画，那这三个是最最C3里面干嘛让CSS变得有趣的东西。能解吗？而且里面我们说过度有过度的坑，变换有变换的坑，动画有动画的坑是不是，而且这里面个人觉得这个API我们过得极其详细了。懂吗？啊，过的机器相去机器的深了啊，也就是说这个API上能挖的东西，我们都已经什么挖过一遍了，咱们就差运用了有没讲，所以说其实你们把这几天关于过渡2D3级类型动画的一些API，你把它整理好，整理成体系，那我觉得在面试当中的话是有极大优势的。

能讲啊，之后我也会要求你们去去出一个这么样的东西，在面试的时候你要去用这个东西懂吧，然后我也会去在模拟面试的时候会干嘛，会去问你们相关的东西啊，看你整个状态到底怎么样，懂不懂啊，所以说先自己准备起来，那布局扩展里面刚才也讲了是吧这两个。响应是个什么？极其重要等等，这个你可以稍微放一放，能理解吗？啊，有有主次的去搞这些东西懂吧，然后下午我会给你们讲一个特别重要的东西，就是这个规范。啊，那下午第一节课啊，大家中午中午好什么，睡一会儿听不讲OK。好，那我们C3就到此结束啊，一个阶段结束。OK。好，关掉。