总结圣杯布局与双飞翼布局
圣杯布局
圣杯布局需要用到相对定位。
前提条件:
1、中间内容包含左中右三部分。而且中间必须放在最前面。
2、设置中间内容的middle,left,right 为:float:left;这样做的目的是本来它是块状元素,这样一来,浮动使得它们会浮动到一排。
1、通过设置padding来确定左右栏的宽度。
2、通过设置中部的width:100%将中间内容充满。
3、这时“左右”在“中”的后面,用margin-left:-100%将“左”放在中间内容的最左边,用margin-left:-右栏的宽度,就将“右”放在中间内容的最右边。
4、用相对定位,设置“左”:left:-左栏的宽度;设置“右”:right:-右栏的宽度。
代码:
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .top,.foot { height: 50px; clear: both; text-align: center; background-color: red; width: 800px; } .middle { background-color: yellow; width: 100%; } .middle,.left,.right{ position: relative; float: left; height: 500px; } .container { padding: 0 200px 0 180px; margin: 0; width:420px; } .left { margin-left: -100%; width: 180px; left: -180px; background-color: green; } .right { margin-left: -200px; width: 200px; right: -200px; background-color: blue; } </style></head><body> <div class="top"> 这是顶部 </div> <div class="container"> <div class="middle"> 这是中间 </div> <div class="left"> 这是左边 </div> <div class="right"> 这是右边 </div> </div> <div class="foot"> 这是底部 </div></body></html>
双飞翼布局
疑问1.为什么结果出来后中间部分稍微低一点?
1、首先在container中设置一个小盒子,通过设置margin来确定左右栏的宽度。
2、将左栏移到正确的位置,用到的是margin-left:-100%;将右栏移到正确的位置,用到的是margin-left:-"右"栏的宽度。
代码:
<!DOCTYPE html><html><head> <title>圣杯布局</title> <style type="text/css"> .top,.foot { width: 100%; height: 50px; clear: both; background-color: orange; } .container { width: 100%; height: 500px; } .container,.left,.right{ float: left; } .left { margin-left: -100%; width: 180px; height: 500px; background-color: blue; } .right { margin-left: -200px; width: 200px; height: 500px; background-color: red; } .middle { margin: 0 200px 0 180px; height: 500px; background-color: yellow; } </style></head><body> <div class="top"> 这是顶部 </div> <div class="container"> <div class="middle"> 这是中间 </div> </div> <div class="left"> 这是左边 </div> <div class="right"> 这是右边 </div> </div> <div class="foot"> 这是底部 </div></body></html>
总结:
双飞翼布局相对于圣杯布局来说用到的属性较少,相对而言较为简单。学习前端的知识要多练,并从自己的练习中不断总结,这样才能得到进步。
拓展:
关于负margin
不使用float的话,负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素,所有跟随的元素都会被上移。
作用于static元素上的负margin属性
/* 元素向上移10px*/
#mydiv1 {margin-top:-10px;}
当static元素的margin-top/margin-left被赋予负值时,元素将被拉进指定的方向。
但如果你设置margin-bottom/right为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。
如果没有设定width属性,设定负margin-left/right会将元素拖向对应的方向,并增加宽度,此时的margin的作用就像padding一样。
浮动元素上的负margin
如果给一个浮动元素加上相反方向的负margin,则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度(比如100px)的自适应布局来说是非常有用的方法。
/* 应用在与浮动相反方向的负margin */
#mydiv1 {float:left; margin-right:-100px;}
若两个元素都为浮动,且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px(因此会导致重叠)。但有意思的是,#mydiv1的内容不受影响,保持原有的宽度。
如果负margin等于实际宽度,则元素会被完全覆盖。这是因为元素的完全宽度等于margin,padding,border,width相加而成,所以如果负margin等于余下三者的和,那元素的实际宽度也就变成了0px。
注意:margin-left:-100%的100%指的是父元素的百分比。