05.尚硅谷_css2.1_圣杯布局.wmv原创

那圣杯布局是你们面试，特别是笔试的时候，经常容易让你们去手写的啊，他就给你个需求上来第一道题啊，手手写一个圣杯布局，看你对整个什么CSS基础功底怎么样啊，写一个设美布局就等什么看看出你的基础，我们来看啊怎么写审美布局。零九，好，我们来写一个圣杯，好，这个名字写的比较怪啊，圣杯布局。好，那这个生配布局，那需求我们先什么两边固定当中，支持性当中就要完整显示当中间要优先下载，是不是好，把这些样式我们全部干掉，我们怎么重新来写好，我们写个稍微好，稍微什么稍微好一点的这个也干掉。呃，这个样式给他留着吧。这个样子我就我不想写了，OK，把这个给他干掉好，我们说一般我们说我们的网站框架怎么样呢？上来你是不是应该有个头啊，好，那给个ID叫什么是不是好，然后是什么当中的一内容吧，叫什么容器content嘛，Con吧，内容吧，T content，好，底下是不是有个角啊，好，来个角，不不来一个foot foo fo来个foot是不是OK，怎么办呢？好，我们这边说有个head，这边说有个foot，好先把head跟foot的钥匙我们稍微写一写，好来一个。

Head，再来一个foot，好，钥匙怎么写呢？好，给一个高度吧，高度为。20吧。好，然后给个text，什么center文本是不是会居中啊？好，再给他一个边框吧，Border e PX，呃，实心的。什么颜色？第个pick，好来看一下，那是不是现在就出来了，好像他有个背景是吧，来一个background Gary走你。

好灰色的吧，是不是啊好，那当中列我们说当中列的高度我们也给掉吧，那这个高度就直接什么给全局的div吧，嗯，给全局D不好。好，我们当中练。Mirror这个列，Nid，不不不不，什么contain这列吧，好，Contain这个列我们来给一个高度，呃，Contain高度我们让内容撑开来吧，好，那肯定里面它需要什么，是不是我们真正的商业布局啊？好，我们说怎么写这个布局结构，首先我们来class，叫IDL，因为你这个当中列要优先加载，就是说一定在这个容器里面的什么第一列吧，好走NY，还有什么left，这个要干嘛，水里面是不是这是left，这是什么I HD right是不是好来一个left。来一个。Right，好，来看一下总里好，现在是不是这样的，好给他们去描点颜色，也就是我这个content底下的什么，Content底下的这个点，六六瓦，好，再来三个好，还有什么？

Left。还有我的right，好不一样的背景颜色，Background。P考好，他们两个呢？好，给个一不要后者宾啊。后宾格可能不好看啊，不是不好看啊，最好看的就是用别的是不是，嗯，我们说LA这个热程应该干嘛，宽度应该要干嘛。宽度开设十，因为两边。固定当中自适应好，200X这边也给200P好走好，现在是不是就在了问题，我们就是要解决什么left跟热上不去的原因嘛，是不是好，那这个问题怎么解决。Left这个热上不去怎么办？

想想元素跟元素之间的是不是有边界的？你元素跟元素排列的时候，是不是是不是有边界的，好像这个边界是由谁来控制的。这个边界由谁来控制？Marin吧，Marin是不是我们和模型的最外层？好，这边讲到一个极其重要的东西，项目当中都会使用marin为。复制好来看一下，现在你看你这个left的边界是不是应该在这块，Right的边界在这块，为什么他们现在是这样排的，因为你是快捷元素独占一行吗？其实干嘛你这个东西是上不去的，管理这个边界在哪啊，我会计元素独占一行能理解吗？好，那怎么办？我先让你们干嘛全部统一的。Left left干嘛，Flu为left，它的flu也为left，它们俩是不是就浮起来了，你看浮起来之后是不是干嘛，因为你浮起来了嘛，是不是这个肯定这干嘛。

要清掉清除浮动的，清除浮动怎么做，有没有教过？肯定fix有没有交过，没有是不是，那我这边先干嘛，先帮你们写这个东西，我这个东西我会讲好不好，我先来写一下，那这个东西你们先不用管好肯。Fix clear fix，好C好，好，这是我明天要给大家讲的内容啊，Clear它是有套路的，好点。Clean fix好怎么写呢？好，首先这边干嘛来一个，然后是room，它是为一啊，然后clean fix来一个after为元素好，来一个内容content为空好来一个display为block，其次最重要的为boths好，你们先看一下这个东西先不用你们懂懂不懂，你们只要用到用到这个clean f之后，只要你这个元素底下是不是有浮动元素啊，浮动元素是撑不开负极的，高度上面是撑不开负极的，懂不懂，一旦降完这个可前fix之后你们看。

有没有乘开负几啊，它就乘开负几了，暂暂且你们先知道，只要加上这个KF的之后就能乘开负几，知不道具具体是什么样的原理，讲完BFC后，我来跟大家去说好吧，OK，大家看，那现在我们说现在呢，看那边界是不在这块。这个边界决定他们要不要合在一起吧，哎，Right的边界是，呃，Right的边界在什么rap的前面，是不是也也有它自己的边界啊，那你现在要上去是不是，我把我这个边界往里搜就行了。是不是你现在不是要上去吗？其次我们说me是不是一个快子元素啊，筷子元素允许其他元素上来吗？不允许吧，那我们先把这个什么me先给它改掉。找到这个middle是不是它我先也让它浮动起来，好，它浮动起来其实你看是不向变大了，为什么变在了浮动的元素，它的高宽靠内种增开，你看我这个粉红色的东西是不是靠内种增宽的？好那怎么办？我们说它的宽度是不是应该占据我满屏的，那它的Y是不应该自己来指定一下了，Y是必须要为百分百的吧？好，这个是你看生本区势不是就占了好现在问你这个面允不允许其他元素上来了。

允许了，因为它不是会计元素嘛，浮动元素，浮动是单独一种和模型绝定位有定位和模型，浮动有浮动和模型懂不懂，正常会计元素有会计元素和模型，那个元素有那个元的合型懂不懂，OK来看，那现在面是不是允许其他元素来上来了，你要允许我left上来，是不是就是把我的left的边界往里推一点。能理解吗？好，我们看我是不是left，待会要来这边。是不是我left，大家看是不是我left的前面的这个边界，待会到要要到什么这边来啊，相当于我这个边界要往里推，往里推多少。推你一个没准的宽度吧，可不可以理解啊，推你没宽度之后，我是不是就可以上去了，想想那怎么办？我们说边界是由谁来控制的？

吧，你这个边界不是用来控制吗？我让我的为for谁的？Left吧，我让你这个马left要为多少边界往里推多少，推你一个瞄准的宽度吧，你瞄的宽度外侧为百分百吧，这个百分百是不是称当于玻璃的外的？测出它不出的外什么，如果我这边这个marketin，看marketin left为负百分百，问你这个百分比是参照于写的，它们两的参照物是不一样的。因为你们是不是一个并列的元素啊，那它们的参照物是不是就是这个肯定的，因为你们都没有定位嘛，正常的浮动元素嘛，它的包含块是不是就是你的一个直接负元素啊，而且你这个复元素是不是一个快元素啊，那大看那这个Y问你这个marin的这个百分比跟这个Y的这个百分比参照物是不是一样的，那你们百分百拿下来的实际值是不是一样的。

好，来看一下有没有上去。上去了吧，相当于是一个是一个什么样的过程，刚刚你的这个middle是不是诶。刚刚你的middle是不是这样的，我的left是不是在下面的？是不是啊，为什么现在我们说这个left是不是也已经浮动了，而这个边路已经也已经浮动了，它是允许其他元素上来了嘛，问题是你这个边焦这块left的边焦是不在这块，因为你一行放不下的，它是不是直接干嘛让你换行了，他们俩的，你看middle的一个右边界跟left的这个元素左边界有没有合在一块，其实。其实是合在一块的吧，只不过一行放不下，它让你换行了嘛，对不对，现在我是不是让它这个边界干嘛，我一个负值啊，负值是让你的边界干嘛。往里面去说能明白吗？那我这个边界是不是慢慢慢慢，因为我是是不是让你输的百分百啊，是不是这个边界就跑到这块来了。

是不是记住marin left为负值，只改变元素的边界，不改变元素的位置，就说我marin left为负100%，是不是只改变你这个marketin Penny one hand，它有改变吗？没有，其实元素还是在。我这个红色区域根本就没有动，能明白吗？那是不是相当于我粉红色这个什么，现在是我这个红色区域这个边界吧，好，这个左边这个边界相当于前面这个部分是不是捞空了。是不是这边就是给你直接给你什么落空了，一旦捞空了，问你这个区域上面这个元素要不要占。比如说你元素跟元素边界跟元素边界之间是不是应该贴在一块的，现在我是不是后面这个左边界跟当中有一个什么镂空的这个距离了，这个距离要不要补上。要不要补上，是不是相当于什么这个区域。这个整个这块这个区域干嘛。

是不是被我这个蓝颜色的东西给覆盖掉，能理解吗？一样吗？大家想想一样的吧，一个小盒子，一个大盒子，大盒子排在上面吧，本来你如果浏览器能放下的，你们排的话是应该这样排的，呃，这个盒子比较小，是不是你你们你们应该是这样排的，问题是一个浏览器放不下了吧，那它是不是选择换行了，换行之后你看这是上面这个元素的右边接法，这是下面一个元素的左边接法，本身这两个边界是不是应该合在一块的，就是因为你浏览器放不下了，它才下来的。是不是现在我是不是把这个边界往后推了，我把这个边界是不是往后推到这块来了，能不能理解前面是不是相当于镂空了，镂空了这个距这个东西它要不要把这个区别。再去做文档流，里面有一块东西被镂空了，上面这个东西要不要下来？那是不是就应该要变成这了？可是问你啊，我现在在这一块是不是只改变它的边界啊，好，我们现在看是我，好像我是我，我改变这个边界之后，整个元素跟我一起走了吧，好，切记一些事情，改变边界的时候，元素是不会跟你走的，它只动边界能明白吗？相当于就是什么给这一个。

OK，相当于最终我的这这是不是我上下面这个，比如说边界啊，它上面这一块，我只是把它的边界往后推了，元素我也会推。没有推计算机是横死的，你说调整他的马left，那他只调整他的，没有马left，他有调整其他内容吗？没有，你说最终我们说上面这个元素去找他的马left的时候，是不是就在这块。是不是啊，那我问你这个left它的边界是不是这块，那这个边界跟这个边界要不要重合到一块去啊。又重复到一去啊，那这个元素是不是就算了。能不能理解，可不可以理解？那这个是比较绕的一件事情，Marin left最难的就在这块，切记一点，Marin left只动元素边界，不动元素位置。

能明白吗？而且我们两两相邻元素之间的。编剧是需要重叠到一块的，不能有任何空隙的，能明白吗？就是说这个时候我们说什么，这个时候才导致我们什么，这个left是不是上来了，这样现在我想让这个right。出现在这个。我应该怎么办？是不是把它的边界调整到这块，调整它的边界，When right的这个right这个元素的位置有没有动。有没有动，没有动只是这个边界了问题，这个边界跟这个边界要不要合到一块。要那这个边界是不是就上来了，OK，你看默认情况下，你看我这个元素是不是在我边边界的左边的，那你这个边界合上去之后，这个元素是不是还在它左边，会跑到到右边去吗？不会，还是那句话，只动边界不动元素位置。

理解理解清楚能明白吗？那我现在想让这个上去怎么办？把它的边界往后推断。两百八好来看那是不是这个干嘛，他的妈，那应该不到付200片是吧，并界往后推200吧，好走。你们上来。是不是就上来了，好，现在还差一点什么事情。我问你，你这个百分百他能动吗。你这两个值最终渲染出来值是不是应该要一模一样的，不然它的位置是不是会干嘛受到影响的，说你这两个值最终转换出来的话，这个数不是一样的吧，应该你说我这边能用吗。能用呕吐吗来看。错位了吧，能理解啊，所以这两个值必须都得是百分百，而且他们的参照物必须都得是一样的，能明白吗？这个时候他才能干嘛，才能走上来，能理解吗？现在还现在还差什么？

中间内容要要显示出来吧，我们这个时候中间内容是不是这样的。是不是啊，你想让它显示出来，是不是给这个中间内容去加什么。Ten，看那是不是给我们这个。每走区域加什么看啊，上下为零左右，给多少？200吧，看一下行不行。行吗？为什么你这个外思维百分百，其实我们一开始需求是这样的，干嘛来看一下我是不是干嘛，这个是我的。呃，来，这个是我外百分百，我其实是想从自己的外里面抠掉200，两边各各什么扣掉280，你看我们这种写法，你的外已经有百分百了，是从它当中扣掉200吗？

是不是在这个Y两边去加200啊，这样可以吗？不可以，能明白吗？所以说我们不能给menu加pen为零到200，让这个么都取出来，这是一个不现实的方案，怎么办？找到我们的容器。给我们这个容器加排上下为零左右的200来看一下，一旦给我这个容器加了之后，是不是就这样了，我这个容器是不是在我的。外部的，你给我加了pen之后，我是不是觉得就从我的内容去开始渲染的，那我再让跟red出来不就行了吗？给他们一个相对定位出来不就可以了吗？那么你讲那这个量会干嘛？来一个position，为什么？相对定位是不是它的left应该是有多少往外走吧，我们说前端里面的坐标系，它长什么样的X轴。外走，往这个方向走，正直还是负责，负责往这方向走，正治还是负责，负责往外扩，是负责往里收，是啊，正值，记住好吧，那怎么办？那不到负他呢？

谁为负200？为负200吗？来看。