09.尚硅谷_css2.1_双飞翼布局.wmv原创

OK，嗯，我们刚刚讲了圣杯讲了等高是不是好，我们说圣杯布局采用了哪几个技术点？浮动相对定位mark为负值是不是啊，可是我们说用了这么基础点的话，就会有人觉得它不好，因为他觉得你在做最外层的布局的时候，就连相对定位你都不要给我，给我用，能明白吗？所以最好我们就不要出现定位，因为定位本身做布局就是不太合适，能明白吗？而且是我们外面整个架构上面一个布局吧，是不是？你想啊，我们现在做这个生命布局，我干嘛做完这个生命布局我问你。这个里面要不要去填充其他很多元素的，这个里面要不要，这个里面要不要，是不是可能里面还有成千上万的div啊，分别放不一样的东西啊，如果你是定位的话，可能会影响到我里面这些东西能明白吧，所以我们尽量想让我们这些外层这个结构。啊，这些外层这个结构干净一点最好，在我文档流里面，最好你不要有地位，不要有层绩的提升，能明白吧，那这时候怎么办，是不是说最好不要用相对定位啊，我们在圣杯布局，圣杯布局里面我们使用相对定位干嘛了？

我没有相，我没有相对定位去做什么事情。是不是你两个黄颜色的块跑到这边干嘛不想走啊？是不是我们靠相对地位给他定出去了？能不能讲OK，那我们干嘛来写一下双飞一布局好？个人觉得双飞一布局的实现要比圣杯布局来的更加友好啊。OK，来，双飞一不局啊，名字比较污啊，我也不知道为什么叫双飞一局。听说是淘宝的一个工程师啊，他设计出来的双飞务局啊，这个淘宝的工程师叫什么，叫诸葛还是叫啥的我忘了。就是你们有没有发现，只要是阿里巴巴的人，他们对外的话都都会有自己的艺名，是不是啊，哪怕自己名字再好听一点，他们都会起一个什么两个字的异名嘛，是不是啊，不是，是不是很好，是不是啊。

很好很好，很尴尬，好整理好，我们再把这个来吧，我们再把这个什么整体的价值，我们再来写一遍吧，那首先我们说诶。外部肯定得有一个head，是不是好，这个时候我来写，你们来说应该要怎么去写了，好三层，这一层是什么？只有NTT吧的吧，是不是啊，OK，来一个什么塔是不是啊，OK，好，这里边我们就稍微瞎写点东西把，那个爱四也行好。来且四好走好，这边我们叫什么叫要had，是不是这两个样式无关紧要，是不是好，只不过我们再来写一遍而已吧。好，来，走CTRLC，好，What好，待会写样式的时候，你要思考起来了，哪边能写，哪边不能写，是不是好，Mar。

好，这里好上来，我们说是不要来设计这个结构了，这个结构怎么设计啊。三个D，这三个D怎么排中间的在最上面啊，只要听到这个点就可以了拉，为什么middle是不是底下再来叫什么底下随便你吧，现left在。Right好对你然后干嘛，这边是left，这边是right，这边是middle是不是啊好，那写完这样之后，我们说来干嘛，稍微先写一点，我们先把什么等高给做了吧，等高怎么做。等高怎么做啊，待会这底下三个是不是要去什么等高的这么做C什么T底下的什么。

肯定的提到这个点，Middle还有什么好，再来一份。它底下的left好，再来一个它底下的right好，要去做等高是不是。更高怎么玩？是不是感觉这个字有点小啊，不敢来。来一个pen定pen波，先给它拉大一点，来一个这是10万还是1万，1万好，再给你缩回去负1万好，等高布局是不就做完了啊，好走你然后呢，好先来看一下吧，比较丑吧，好先把这个had的样式我们稍微来写一写。好，Head的样子比较简单啊，呃，叫什么had不had是ID呢，还。

好，这是ID had，还有什么foot，好，他们的样式的话稍微写写吧，怎么写呢？来一个边框，EPX实心，OK，再来个什么，嗯，给个背景颜色吧，Background为灰色，再来一个什么，嗯。T等于center好，整以好，那基本上面的样式出来了是不是好？底下这样式怎么写？好，首先上来不管了，虽然说做完等高布局了，我把全局的这几个div干嘛统一来个高度吧，啊，这个高度为50PX吧，好，那是不是统一都有高度了？好，给不一样的去描不一样的颜色走你。好，这个写到上面去吧。好，稍微写点注释啊，这个是头部。头部、尾部、头部、脚部。呃，脚部，头部脚部的样式好，这个无关紧要，OK，这边我们说什么三列的等高布局，OK，好，应该是为。

等高布局好，整理好再往下走，我们来说了，是不是，那真正什么3.2是不是应该在这边去写了，那真正的我们说这边我们是写什么双A1布局的套路就要来了，双飞翼布局好。怎么走？首先呃，来给他们描不一样的颜色，好，CTRLC来，先它来描个颜色吧，Background为好，世界上第二美的好地图定了，走，你他们俩呢？他们俩的颜色的话就描的稍微的淡一点嘛，带个光的好，这。好，跟着思路走，你们要干嘛？这个是不是得跟上了？这是什么鬼？

他不应该那么高啊。哦，他们是不是干嘛，他们是不是多加了candy呢？是不是，那怎么办，那谁啊。是不是上来这个容器干嘛，只要你溢出我的，我就给你干掉是不是over呗黑的是不是好找你啊，这个时候O就可了，是不是，然后呢，我们说你们因为要去要去一行嘛，是是上来干嘛，三列全部给我。全部都我浮动float left好走。全部浮动吧，浮动完了之后，我们说了浮动元素是不是有自己的特性的，高宽靠内容撑开的，是不是现在我们是不是指定的高度啊，就是你不指定高度的话，是不是靠内容增开的。是不是啊，好，因为我们指定的高度，所以说现在没有靠那身高吧，那大家知道现在让这个文字怎么在我这个高度里面居中啊。

是不是可以写行高啊，行高为50PX啊，这个知不知道OK，那这边是不是就来居中了，是不是啊，好，就是完了之后我们说问题是现在我们说要做双汇布局吧，我们说你这个左右其实你们是应该有宽度的吧，这个宽度是不是要定。定时的好，求你200篇是不是啊，好，然后干嘛他们也要T等于。好，走你。好，问题是现在你这个middle应该怎么处理啊？面的宽度是不应该占据我整个频幕的，怎么办？它因为是因为要代表什么，做一个什么伸，做一个什么响应式嘛，相当于伸缩嘛，是不是就是我浏览器多少你就是多少嘛，是不是，那怎么办，因为你刚刚已经浮动起来了。是不是啊，所以说你这边如果想要再跟我浏览器一样的话，你这个外必须自己指定为百分百，那是不上来就自己自自己指定的百分百了，为什么这个粉红色区域变得那么短，升本区域变得那么短。

他有什么？啊，因为撑开来了嘛，因为它是不是它也有个pen啊pen疑问嘛，因为你撑开来的话，所以说这个里面不就什么生本的区域吗？没毛病吧，啊问题说你这个life的不要上去啊好怎么上去第一步是什么？就是其实难就难在这一块怎么上去啊，第一步是什么。把那的妈给把那的成分是可以吗？是不是少了一步啊，来看看，如果你把这个什么来marin left好，那我们走来看，把marin left干嘛？Marin变成负百分百，是不是来这个时候他们两的参照物是一样的，数字也是一样的吧？走你，你看他有上去吗？

啊，不对，上去了，为什么，因为我这个面流是不是刚刚他也已经也已经浮动了啊，其实这一步是很重要的，你这个面流也应该要干嘛浮动起来吧，不然不然再看，如果你这个面路没有浮动啊，我把这两个浮，我把这个浮动给做掉，那我把这个浮动写给什么。写给什么，写给这个right跟什么left嘛，我们说单单让他们俩浮动，因为只需要他们俩去一行嘛，是不是啊，你看行不行。是不是啊，你看我让这个什么，我让这个left的诶。是说负100啊，其实他去哪了？想想他去哪了？我先把这个等高给做了吧，这个等高稍微有点难看。好，大家看。如果我没有负100，我没有负100，看看他在哪。哎，怎么感觉他们俩的啊，这边是不是少少了个分号，是不是这边也少了个分号吧？OK，来看一下，我们看如果给他什么，他们俩是不是他们俩互动起来是不是就这样的好，如果给他百分百好，看他去哪了？

但知道他跑他跑哪去了吗？首先你一开始的位置是不是在这块。本质上以这个market为负值的话，应该要上去。可是你这个面是一个快捷元素，不让你上去，跑到了浏览器的。另一边大家不信我可以把这个值给小一点，比如说给个负40PX，看它在哪。再再说吧，来看一下。整理，我把它什么附上去看，我把这个值慢慢变大。大看是不是往浏览器另外一边在跑，那么因为你上面不让我上去嘛，这个时候才往览器另外一边在跑吗？怎么讲你让我上去的话，我是不是就可以上去了，好，那我是不是得让你上去啊，所以这个浮动干嘛不能只给他们俩指定，必须你们三都指定好，只有你好，那是不是就来他的马为多少负。

百分百还要PX吗？不要，那是不是就上去了好是不是呢。呃，找到这个好的这个什么。Left为负。200PX啊，周年好，现在是不是要把这个头给露出来啊？好，那这就是双飞翼跟圣杯的区别，在这块前面都是一样，都是靠浮动，先搭基本的架子透，通过马副值把它们三个放到一块去，前面的套路是不都一样的？好到这一块不一样的，圣杯怎么做的，圣杯怎么让当中这个区域出来？给谁加pen点，是给当中这个区域加pen点，还是给其他东西加pen点，给外面整个容器加尼玛，比如说我们在这边是不是加好定，为什么上下为零左右，是不是给个200，是不是这个时候再通过定位把他们俩给什么拉出来吧，那这为什么这个潘尼不能交给middle？

在下我们说，哎，你不是这个me吗？你me现在不就是长长这个样子吗？我给我给me加个pen。不就行了吗？那比如说大家看我把这两个透明度干嘛，我把这个left，我把它的透明度调成零，我调成零，好整点再把它的一个什么透明度给它调成。OB调成零，我现在我这个面不就涨价吗，我干嘛，我给面两边给个吗，怎么自己在画我的天呐，什么鬼啊。我看一下。把我吓到了。

好OK，好好，你看我现在这个面是不是就这样的，哎，我说我给这个面两边给个盘点，它不它。他不就过来了吗？那是不是这两这两边不是就有判定了吗？想想这是在什么情况底下才会这样的，你的外等应该为什么？呕吐吧，你外事为凹凸的情况之下，我才会从自己宽度里面扣掉两块肉给你啊。是不是想想我们现在为了干嘛，我们现在为了因为你是浮动起来了，因为你这个me是不是已经浮动起来了，为了让你这个宽度达到我视口的关速是one指定成了百分百啊，这个时候其实你的外是不是已经变成百分百了，这个时候你如果再给它加看怎么加了。在两边加的吧，能理解吗？那这个这个时候这个东西是这个吗？会比我这个视口要大，能理解吗？也就是说我这个pen点能加给这个面吗。不可以加底，这个没了之后，你看整个布局就坏掉了。

好，就刚刚那个拍你在哪，我们是不是加给容器，这个拍是不是干掉了，如果你加给这没你这个拍上下为零左右，你给个200，你看有没有坏掉，为什么坏掉了，这一块区域是不是你家的pen。是不是啊，而你我是想让left顶到这块区域来是吧，其实left是不是应该要再走一个，再走两个派点的距离吧，是不是因为你加上两个派点嘛，就说应该这个LA是不是再走两个派才能到啊，可是我们说你在CSS里面去做运算好吗？这个这个PA的值是不是根据我们这个什么LA它的一个宽度来定的，能理解吗？所以说干嘛我们如果你想要这个left的位置再对的话，你是不是要把刚刚那两个喷进去，再给它加上去啊。能理解吧，好的，那你说这种方案好吧，不好吧，那我们怎么怎怎么怎么解决的，是不是我们说把这个拍给吗？给了这个容器啊，给了这个容器之后再让他们俩平移出来啊，可是我们说哎，双飞一布局觉得圣杯布局这种方案不好，要改掉，他不想这么做怎么办？

好，他是这么做的，看一下，哎，他说你不要动CSS了，CSS你就这么写怎么办呢？我在肯德里面，这是我的me啊，好在me里面来一个包裹div，来一个class叫什么。好，这个里面来放真正的middle的内容，就说内容就放在什么middle那里面，那想想，那其实现在大家看我们整个结构。看这个me是不是外部有一个M啊，这个面能不能做，能不能加pen啊。能不能不能吧，这个面加在pen的话，这个配音是不会错的，而且整个布局是会错错乱掉的，这个M1呢，能不能加pen。给它加两边加派不就行了吗？我那走多少是不是跟这个面面宽度有关系啊，跟我这个面哪它有关系吗？没有那干嘛直接给他干嘛。

那是不是找到这个面好，直接给这个面底下的谁。点M1给他加开，上下为零，左右200看。神奇的事情发生了，是不是出来了，能不理解啊，这个时候我问你是不是也把我们整个设备布局，把我们整个战略布局做完啊，还可能需要什么？最外层这个玻璃要干嘛，最外层这个玻璃要干嘛，因为你当中这个区域要干嘛，完整显示的嘛，最好给他一个最小宽度两倍的left加两倍的加left都可以，懂不懂那就是600好走，你刷一下好走。哎，布局不出来，你看现在是不是可以通过这个滚动条看到它一个完整内容的好走，往外拉是不是也就可以了，是不是想想这种方案跟圣杯布局哪边不一样？

只有一个地方不一样，怎么处理两列的？位置圣杯布局靠的是给外部容器加Penny，然后通过定位的相对定位的形式把left的热给定出来，是不是双倍布局呢？靠在HTL结构里面给你再去加一层，是不是通过这一层的pen把自己的内容OK了吗？挤出来能理解两种变化方式，个人觉得双倍这种实现更好，能明白吗？只不过是在I细胞多加了一层结构，可是它没有使用到。定位，那所有的东西都在文档里面，能理解吗？OK，好，其实用相对定位啊，也是所有的东西都在文档里面，可是毕竟提升的层级能明白吗？好，那这个是我们什么？稍微布局好，那三列布局到这块已经全部讲完，那上面的话这边。好，两组一个对比，给大家接过来看一下。好，我们直接贴到这个双双飞布局里面，好，贴到最上面，好两组实现的对比，两种布局方式都是通过组列，把组列放在文档流最前面，使主链优先加载，没问题吧？好两种布局方式在实线上也有相同之处，都是让三列不动，然后通过外边距形成三列布局，没问题吧？好两种布局方式不同之处在于如何处理中间主列的位置吧，也就说你这两列你应该怎么去放吧。好，圣杯布局是利用副容器的左右那边距，将两个重列的相对地位来把他们位置给调正了吧？OK，圣杯布局呢，在主列里面嵌套一个新的什么负极，利用什么，利用主列的左右外边距，是不是进行什么布局的一个调整。

能不能看懂这两句话，OK，那这就是我们说的布局的一个什么，实现，OK。好，给大家五分钟时间稍微过一过好。