03.尚硅谷_css2.1_使用定位实现三列布局.wmv原创

我刚说了浮动提升半成，一个元素分两层，一个元素分两层，这个事情只有在浮动的时候你才需要考虑，定位都是一个成级一个成绩提升的，有这吗？是两层帮你一块去提上去的，能明白吗？好，那大家是不知道大家之前有没有做过需求。好，我来写下，好，有没有做过一个东西，就三列布局。有没有做过？有没有听过圣杯不绝？圣杯双飞翼双飞，有没有听过？OK，我们来看一下什么叫三列布局，好，这个是一个很常见的面试题，那现在我们讲这个三六布局，不是为了讲这三略布局才去讲这三略布局的，明明白吗？我是为了讲我们三略布局当中使用到的所有的技术点，其实之后我们的三略布局不会用我们现在这种圣杯啊，双飞这种实现方式，可是这个方式是一个很经典的方式，里面使用到的所有的技术点，你们必须得一清二楚，明白吗？好，那什么叫战略布局？它有几个需求，第一个为什么是不是叫两边？

固定当中。知音啊，好，之前有没有写过？应该写过一个圣杯吧？身边布局有没有听过没有，是不是OK，那那那我们来说吧，好，我们说是不是要写个三略布局啊，好像想用三略布局用定位能不能写，我现在就是这个需求，两边固定当中是四点。来，我来叠密码来，那这个是一个很常见的面积啊，大家注意一下left是不是么，左中。好，还还有什么RI right嘛，是不是好left。Middle。Right，我们说当中你待会是要去知识音啊，来想想吧，那我们是不是来去写点样式就可以了，来一个style，我们说首先干嘛，首先呢，上来干点暴力的事情，马全部给他清掉，看给他全部清掉是不是好左边。

跟右边是不是要固定宽度的好，干嘛给它一个Y为200PX可不可以啊？好，全局所有的div的高度我先上来全部指定掉，全局这个div的高度为多少呢？高度的话我统一给给100OK，好，那看是不是两边固定当中支适应啊，怎么让它支持100当中啊。干嘛？他的外要空吗？不控能不能支持？凹，这个能不能执行啊，一样可以执行吗？你现在看看这个面它的包含块是谁啊。玻璃嘛，离它最近的这个快捷主线元素嘛，是不是你的宽度是不是通过玻璃干嘛传下来的，那你干嘛，如果我浏览器拉来拉去这个，我这个玻璃的宽度是它就会变的，那你这个密的宽度能不能支持啊，其实你不需要干任何事情，它就是支持性的话，好来看这个时候我给它一个颜色就可以了，让它来一个变成什么深粉，上面这两个都是什么统一让它浅粉OK。

好走，你那是不是长，是不是长成这样的，问题是说我们干嘛三列布局嘛，你是不是这left跟应该来我这两边是不是啊，那我定位定上去不就行了吗。是不是啊，干嘛我给这个left干嘛？Left我来一个行为po是不是写错了，Po为什么？8SOL，不是so没有打错吧，啊，Lu AB so，哎，关掉再来。给他干嘛干掉来什么，不给我提示怎么过，为什么，是不是就可以了，好，走你好，Left为left为零嘛，好，错也为零，好，再来个什么right好为。

好lo right为零，然后呢，Top也为零，是不是就可以了，是不是啊，可是我们说三略后区就就这样做吗？这就是一个你看两，你不是说两边固定当中知识性吗。是不是你看你看你现在略布局做的，我问你，你做一个三略布局当中列的内容是不是最重要的，你能看到当中列的内容吗？现在用户看不到单中间内容，你这个密度去哪了？是了，是不是啊，你是不是应该让这个密度出来啊，你让这个me度得显示出来吧，不然你做三热物具不是做个假的吗？是不是啊，那怎么办出来其实也好做啊，怎么办？我们说文字是不是从内容去开始排的，那你两边给什么？

给Penny。他不就出来了吗？OK，那第二个需求三六不就是第二个需求什么。第一个两边固定当中执行，第二个叫什么当中列要当中列要完整显示好，这掉了道好可大，看它有没有什么不好的地方，走，你我慢慢变小，慢慢变小，完了你当中间都没了。这三六布局它它有任何用吗？没有任何用，三六布局第三个需求懂吗？就是当中就要完整显示吗？懂不懂啊，这第三数据还没上来，还是当中要完整写是吧，那一般我们会给这个波点。来一个最小。宽度，最小宽度怎么求？好，这是有说法的，怎么求两倍的left加上right，你说什么？你两倍的这个left值加上什么值，或者是两倍的量值加上什么left的值，懂不懂这样的话干嘛？比如说什么面积Y是多少，现在我是不是干嘛应该为600，因为你两两倍的left是不是400啊，再加上个rap不是200啊，那总共不是600吗？好走，你来看一下，也就是说我当中这一列最小要给我一个left的宽度。

能不能理解啊，好周你来刷一下。周年。嗯，不让我脱，好走。好，F12。好，来。好，大家看现在是不是800多啊，你看900多吧，慢慢的变到600的时候，是不是应该要出滚动条了，因为我脖体的最小宽度为度啊，600嘛，大家看走到600的时候，你看有有没有出来滚动条，有出来滚，可是面对内容有没有被压掉。照样还是被压压掉了吧，为什么？你看它变成这样了，为什么？想想我们现在这个定位参照谁来定位了。

这两个定位现在参照于谁来定位的？他们有定位的负极吗？没有，那就是啊，初始包含快视窗大小的矩形嘛，你这个时候拉来拉去，你看left永远跟着视窗走，因为它就干嘛靠着视窗，Right left的为零嘛。能理解吧，这个时候面对内容被压掉正不正常？正常吗？说定位做三六。