发下课程完全听不懂了

你好 , 同学的心情老师是很能理解的 . 本阶段的几个案例相对于前面的课程来说确实是有一些难度的  , 听两遍听不懂也是很正常的 . 所以请同学着急 , 也不要担心 ,听老师慢慢给你讲解一下圣杯布局 .

首先圣杯布局案例是结合定位 ,浮动以及margin实现的布局效果 . 所以如果是遇到的知识点还不是很明白 , 建议同学要及时复习以前学过的知识 . 加以巩固 ,如下 :

圣杯布局的实现的效果是中间盒子自适应 ,两边盒子固定 . 所以中间的盒子设置宽度100% , 这样就占据了父元素的内容宽度,不包括父元素padding ,给父元素设置左右填充是为了给左右的盒子留位置 .

我们一起慢慢的分析它

本来三个盒子设置浮动 ,是要在一行显示的 ,但是由于中间盒子宽度太大 , 把它们挤到下边了 .两个小盒子是被迫挤下来的 , 所以这里时候就要配合设置margin或者定位 ,让两边的小盒子到达左右两边的位置 .

例如拿右边的盒子举例子 :

右边的盒子是被挤下去的 ,它本身应该和中间盒子在一行显示 ,第一行没有它的位置了 , 所以先设置margin-left:-220px ,让它往左移动 , 叠在中间盒子的右侧 . 叠在middle上后 , 它距离浏览器右侧还有一个父元素右填充的距离 ,也是220px  . 所以最后要结合定位 , 通过 设置right: -220px;让它往右移动到右侧了 .

right: -220px;换成left:220px也是一样的 , 代码很灵活的  . 像课程中的双飞翼布局 ,也是实现了一个中间自适应 ,两边固定的布局 . 一个布局有很多种实现方式 ,课程也只是讲解的其中一些 .所以同学在学习的时候不是为了多学会几种布局案例  . 课程最重要的目的是 ,锻炼大家要灵活运用所学知识 , 完成一个布局 . 在实际开发中 , 布局方式有太多 . 我们要学会去思考 ,如何用我们学过的知识去完成它 .这样自己才能够成长 , 加油 !

如果在课程中哪里听不懂 , 可以在问答区域提问 , 老师会帮助解决的 . 

祝学习愉快 ,望采纳 .