圣杯和双飞翼布局的思考
圣杯和双飞翼布局实现的效果一样,他们的共同点都是实现三栏布局。
1、两侧宽度固定,中间宽度自适应的效果;
2、中间部分优先加载;
3、允许三列中的任意一列为最高列;
4、均只使用了一个额外的div;
圣杯布局:
布局上如下图所示:
<div class="header"></div>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
constainer包裹着center,left,right,将center放在最前面的目
的是达到优先加载中间部分的要求。
给上面的代码加样式之后显示效果是这样的:
既然要两边宽度固定,假设左边的固定宽度为200px,右边的宽
度为150px,那么先给两边留出它们的空间,所以给container
加左右padding200px和150px。
中间宽度自适应,所以中间的宽度要为100%,这是自适应的
关键,两边固定宽度分别为200px和150px。
.container {
padding-left: 200px;
padding-right: 150px;
}
.center {
width: 100%;
background-color: palegoldenrod;
}
.left {
width: 200px;
height: 150px;
background-color: palevioletred;
}
.right {
width: 150px;
height: 150px;
background-color: palegreen;
}
接下来我们是不是该给center,left,right放到一行显示,那么让
块级元素放到一行的方式这里采取浮动的方式。(此处不能采
取inline-block的方式来让他们一行显示,inline-block会自带块
与块之间的间隙,并且没有脱离文档流)
.center {
float: left;
width: 100%;
background-color: palegoldenrod;
}
.left {
float: left;
height: 100px;
background-color: palevioletred;
}
.right {
float: left;
height: 100px;
background-color: palegreen;
}
由于浮动的元素不占位置,脱离了原来的位置,所以footer往
上占据了container的位置,我们需要给footer清除一下浮动
.footer {
height: 50px;
text-align: center;
line-height: 50px;
clear: both;
background-color: skyblue;
}
由于center的宽度是100%,加上center又浮动了,所以center
会占据第一行的位置,也就是占据了整个container内容的宽
度,left和right就被挤到了第二行。
那么我们需要将left放到原先预留出的位置,这里采取的是
margin负边距的方式。
.left {
width: 200px;
float: left;
height: 150px;
background-color: palevioletred;
margin-left: -100%; //margin负百分数是相对父元素移动 负像素值是相对自身移动
}
但是left还是没有走到我们预留的位置,这时候就需要定位出手
啦,用定位的方式调节它的left值,让left值往左移动200px,这
样我们的left盒子就占据了原先预留出来的位置啦。当让除了给
它添加left: -200px让它左移200px, 还可以给它添加right:
200px,同样也可以左移。
left {
position:relative;
left: -200px;
width: 200px;
float: left;
height: 150px;
background-color: palevioletred;
margin-left: -100%;
}
到这里左边的盒子就已经占据了预留出来的位置了,那么还有
右边的盒子也需要占据右边预留的空间,我们还是采用margin
负外边距的方式,让right往右移动整个自身的宽度,直接给
right添加margin-right: -150px;或者margin-right: -100%;
.right {
width: 150px;
float: left;
height: 150px;
background-color: palegreen;
margin-right: -150px;
}
得到效果啦。但是要想保证页面正常显示,还需要设置一
个最小宽度,由于两侧是固定宽度所以最小宽度至少要是
200+150,到这可没有结束,刚刚左侧部分使用了相对定位
(不脱离文档流,原来的位置还在)左移了200px, 也就是说
center的前面还留出了200px的宽度,所以最终最小的宽度为
200+150+200=550px。我们给body加一个min-width必须大于
等于550px。
body {
min-width: 550px;
}
得到最终最终效果啦。
双飞翼布局:
与圣杯布局不同的是在DOM布局上。
<div class="header"></div>
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<div class="footer"></div>
container包裹着center,而不包含left和right。布局出来效果是这
样子的。
同样的,我们给左右设置固定宽度,中间自适应让container宽
度为100%,但是预留宽度我们是在container里面预留出宽
度,通过给center添加两个外边距的方式留出位置。
.container {
width: 100%;
background-color: palegoldenrod;
}
.center {
margin-left: 200px;
margin-right: 150px;
background-color: palegoldenrod;
}
.left {
width: 200px;
height: 150px;
background-color: palevioletred;
}
.right {
width: 150px;
height: 150px;
background-color: palegreen;
}
让这三盒子一行显示,同样加浮动,并给footer清除浮动。
.footer {
height: 50px;
text-align: center;
line-height: 50px;
background-color: skyblue;
clear: both;
}
.container {
float: left;
width: 100%;
}
.left {
float: left;
width: 200px;
height: 150px;
background-color: palevioletred;
}
.right {
float: left;
width: 150px;
height: 150px;
background-color: palegreen;
}
图中,container内部预留了左右200px和150px的宽度,
container,left,right三个盒子添加了浮动,container宽度为
100%所以占据了一行,而left和right被挤到了下一行。
同样,接下来我们需要将left和right放到预留的位置,采取
margin负外边距的方式。
先让left外边距负100%
.left {
float: left;
width: 200px;
height: 150px;
background-color: palevioletred;
margin-left: -100%; //margin负百分数是相对父元素移动 负像素值是相对自身移动
}
**margin负百分数是相对父元素移动 负像素值是相对自身移动
**
此处如果采取margin-left: 200px的方式,那么left盒子只是相对
自身的位置左移了200px的距离,就会出现下面的情况。
接下来再让right移动到原先你预留的位置就好了,我们应该让
right盒子往左边移动150px就好了,所以通过给right添加
margin-left: -150px,的方式达到。
.right {
float: left;
width: 150px;
height: 150px;
background-color: palegreen;
margin-left: -150px;
}
同样为了让页面一直正常显示,我们需要给body添加一个最小
宽度,这里最小宽度就不用像圣杯布局那样计算,只需要大于
200+150就好啦。此处我们设置为500比较合适。
body {
min-width: 500px;
}
这样双飞翼布局就完成了。
双飞翼布局不用像圣杯布局那样使用定位,但是DOM结构上
不如圣杯布局那么清晰明白。并且最小宽度可以比圣杯布局小。
当然啦,还有一种方式可以实现这样三列布局的效果,那就是flex。
flex需要我们采用圣杯布局的DOM结构。代码实现如下:
.container {
display: flex;
}
.center {
flex: 1;
}
.left {
flex: 0 0 200px; // flex-grow与flex-shirk都为0,意思是当剩余空间充足或者不足时,该项既不放大也不缩小
/* width: 200px; 可以直接给width */
order: -1; // order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
}
.right {
flex: 0 0 150px; // flex-basis可以设为跟width或height属性一样的值(比如350px)
/* width: 150px; 可以直接给width */
}
<div class="header"></div>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
这里可能大部分同学需要解释的只有一个地方,那就是flex属
性的三个值分别是指什么。
flex是flex-grow, flex-shirk, flex-basis的缩写,默认值是 0,1,auto
flex-grow: 定义项目的放大比例, 默认为0,意思就是有剩余
空间,但是也放大比例。
如果每一项flex-grow为1,那么每一项将会等分剩余空间,假
如第一项flex-grow为2,其他项为1,那么第一项将占据两份,
也就是第一项将为其他项的两倍。
flex-shirk: 定义了项目的缩小比例,默认为1,即如果空间不
足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等
比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为
1,则空间不足时,前者不缩小。
flex-basis:属性定义了在分配多余空间之前,项目占据的主轴
空间(main size)。浏览器根据这个属性,计算主轴是否有多
余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则
项目将占据固定空间。所以left盒子和right盒子可以不用给flex-
basis值,可以直接给width。