圣杯布局和双飞翼布局的实现过程
程序员文章站
2022-03-21 20:34:32
相信很多人都搜过圣杯布局和双飞翼布局，也知道他们的由来，在这里我就不一一赘述了，今天主要讲的是当我遇到两个布局时，我是怎样一步一步从开始到实现的过程，例如：刚开始我也不懂为什么圣杯布局和双飞翼布局的区别，不懂圣杯布局为什么会有相对定位等一些问题，在这里给大家讲下我的理解，如有错误，欢迎批评指正。 好 ......
相信很多人都搜过圣杯布局和双飞翼布局，也知道他们的由来，在这里我就不一一赘述了，今天主要讲的是当我遇到两个布局时，我是怎样一步一步从开始到实现的过程，例如：刚开始我也不懂为什么圣杯布局和双飞翼布局的区别，不懂圣杯布局为什么会有相对定位等一些问题，在这里给大家讲下我的理解，如有错误，欢迎批评指正。
好了，接下来开始今天的写文章之旅！
圣杯布局和双飞翼布局实现的问题都是三列布局，两边定宽，中间自适应布局，要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。
圣杯布局
1、首先定义三列，为它们设置简单的css样式，代码如下：
[html] view plain copy
<!-- 圣杯布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.left{
background: #E79F6D;
width:150px;
float:left;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
}
</style>
</head>
<body>
<div class="con">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
实现效果图：
这就是普通的让三个div左浮动显示出来的效果；
2、我们让Left和Right与main在同一排，这里需要用到margin-left的负值，这里如果margin-left是负值，我理解的是在此基础上往左边移，设置Left的margin-left:-100%，也就是往左移main的整个宽度，这时Left的左边缘跟main的左边缘重叠，即Left的150px宽覆盖住了main的150px宽；
这时Right跑到左边了，再对Right设置margin-left:-190px;即right也跑到上面去了，Right的右边缘和main的右边缘对齐，Right的宽度覆盖了main的右边的宽度；现在Left和Right都跑上面去了，但是需要注意的是main的值不见了，因为它被覆盖了，设置left和right的margin值只是改变Left和Right的位置，对于main来说还是在以前的位置上，接下来要考虑的问题就是如何定位main的位置？
3、需要给con容器加padding值，padding值的作用是给这整个容器均移动padding值，如在刚开始Left和Right没上移的时候，给con加padding值的效果如下：
现在在Left和Right以及main都在同一排的情况下，加padding的值，就把main的定位到合适的位置了，但是这时的问题是：Left和Right也跟着一起缩了，所以要把Left和Right定位带之前的位置，该怎么定位呢？
4、这时Left和Right需要用到css 的left属性了，left 属性规定元素的左边缘,该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。注意使用属性left的时候要给这个元素定位，绝对定位和相对定位都可以，如果不使用定位的话没有效果，具体为什么我也不知道，大家可以自行百度。
Left的css样式加上：position:relative;left：-150px; 同理css的right属性也是如此，position:relative;right:-190px; Left和Right回到它们各自的位置上，OK，完成圣杯的布局，效果图贴上：
完整代码：
[html] view plain copy
<!-- 圣杯布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.con {
padding-left: 150px;
padding-right: 190px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
position: relative;
left:-150px;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
position: relative;
right: -190px;
}
</style>
</head>
<body>
<div class="con">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
双飞翼布局
双飞翼布局可以看成是对圣杯布局的改进，因为圣杯布局用到的标签属性较多，用着也较麻烦，所以淘宝玉伯大大就提出来双飞翼的布局，双飞翼是把三列布局比作鸟，中间栏是鸟身，两边宽是鸟的两翼，重要的是鸟的身体摆好，再安两翼。思路和圣杯布局一样，这里我还是以上一个作例子，用到main，left，right（其实用main sub extra更形象）。前两步都是一样的，重要的是第三步，在前两步的完成后已经形成同行排列，只不过main值被覆盖了，圣杯布局的第三步是给con容器添加padding属性，而双飞翼布局是为main里面的内容再加一个div，让main的内容包含在内层div里，
[html] view plain copy
<body>
<div class="con">
<div class="main">
<div class="mc">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
这时，只要设置mc的margin属性就可以实现三列布局了，而且main也正常显示；这里，不用设置con容器的padding属性，也不用给Left和Right运用left，right属性，因为设置padding属性就是为了不覆盖main的值，现在将main里的内容放在一个div里，再为它设置margin属性，也就实现了不遮挡main里面的内容值，因此双飞翼布局使用属性个数减少，看着更简便。代码如下：
[html] view plain copy
<!-- 双飞翼布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.mc {
margin-left: 150px;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
}
</style>
</head>
<body>
<div class="con">
<div class="main">
<div class="mc">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
OK，两个布局的过程讲解结束，谢谢大家，欢迎大家批评指正！
OK，两个布局的过程讲解结束，谢谢大家，欢迎大家批评指正！
上一篇： vue两个组件间值的传递或修改方式
下一篇： React根据宽度自适应高度的示例代码