圣杯布局和双飞翼布局

作者: 失而复得_ | 来源:发表于2019-04-08 20:44 被阅读0次

特殊布局方法
实现两边定宽，中间自适应
CSS 经典三列布局之双飞翼布局
CSS布局知识点
经典CSS布局：双飞翼和圣杯布局
圣杯布局和双飞翼布局
实现三栏布局的六种方式
圣杯布局和双飞翼布局
CSS布局分类
圣杯布局和双飞翼布局

在我的理解中，圣杯布局和双飞翼布局的思路是一致的，而且它俩所实现的内容也是一样的，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。虽然两者的方法略有不同，但是也都遵循了以下几个方面：

都有头部，底部，中部，而中部又分为中间部，左部和右部。
中部里的左部和右部的宽度都是固定的，而中间部的宽度是自适应。
中间部的部分在结构上优先，以便先行渲染。
允许中部里的三列中的任意一列成为最高列。
那么它俩最主要的不同是什么呢，我为此画了两幅图：
第一个是圣杯布局：

第二个是双飞翼布局：

这个就非常明显的看出了区别，下面是进行详细讲解。

圣杯布局

1.HTML中的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯</title>
    <link href="CSS/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">这是头部</div>
<div class="middle">  /*这是中部*/
    <div class="m">这是中间部</div>
    <div class="left">这是左部</div>
    <div class="right">这是右部</div>
</div>
<div class="bottom">这是底部</div>
</body>
</html>

我们首先要定义出整个布局的HTML的结构，主体部分是由.middle包裹的.m ,.left ,.right三列，其中.m要定义在最前面。
2.css代码
a. 假设我们规定左侧的固定宽度为200px，右侧的固定宽度为300px，首先我们先设置头部和底部，其次我们要在.middle上设置：

.top,.bottom{
    text-align: center;
    height: 50px;
    background-color: aqua;
}
.middle{
    padding: 0 300px 0 200px;
    height:100px;
    margin:0;
}

我们可以得到下面这种效果

实际的例子为

b. 之后我们就要进行中间三列的宽度的设置，同时进行浮动的设置（将中间三列进行左浮动），并且进行高度的设置和定位。

.left,.right,.m{
    float: left;
    height: 100px;
    position: relative;
}

实际的例子为：

c. 我们要在.middle的部分进行 width：100%占满。
代码为：

.m{
    background-color: brown;
    width:100%;
}

此时效果为：

d.此时我们看到.middle占满了，所以我们现在需要做的就是将.left拉到最左边，我们就要进行margin-left:-100%.
代码为：

.left{
    background-color: antiquewhite;
    margin-left: -100%;
}

效果为：

e.在这个时候，我们可以看到，虽然我们将.left拉到了左边，但是他将中间部分的内容覆盖掉了，所以我们就要使用相对定位left:-200px
同理我们也要对.right进行绝对定位.right:-300px
代码如下：

.left{
    background-color: antiquewhite;
    margin-left: -100%;
    left: -200px;
    width: 200px;
}
.right{
    background-color: blueviolet;
    margin-left: -300px;
    right: -300px;
    width:300px;
}

这样，就完成了圣杯布局。
CSS全部代码为：

@charset "UTF-8";
.top,.bottom{
    text-align: center;
    height: 50px;
    background-color: aqua;
}
.middle{
    padding: 0 300px 0 200px;
    height:100px;
    margin:0;
}
.left,.right,.m{
    float: left;
    height: 100px;
    position: relative;
}
.m{
    background-color: brown;
    width:100%;
}
.left{
    background-color: antiquewhite;
    margin-left: -100%;
    left: -200px;
    width: 200px;
}
.right{
    background-color: blueviolet;
    margin-left: -300px;
    right: -300px;
    width:300px;
}

效果图为：

PS千万要记住在.middle中进行height:100px；的设置，不然.top和.bottom将会合在一起，从而导致你在写完代码的时候，.middle会将.bottom覆盖掉。导致你的圣杯布局中没有底部，如果在你运行后还是看不见底部，你也可以在最后进行浮动的清除,代码如下：

.bottom{
      clear:both;
 }

以上就是关于圣杯布局我的一些想法。

双飞翼布局

1.HTML中的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <link href="CSS/CSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">我是头部</div>
<div class="middle">
    <div class="m">我是中间</div>
</div>
<div class="left">我是左部</div>
<div class="right">我是右部</div>
<div class="bottom">我是底部</div>
</body>
</html>

我们首先要定义出整个布局的HTML的结构，主体部分是由.middle包裹的.m和单独的.left ,.right三列。
之后就和圣杯布局差不多了，我就只把代码贴出来，你们可以根据我上面发的它俩的图片自己进行书写，下面就是css的代码了。

@charset "UTF-8";
.top,.bottom{
    text-align: center;
    height: 50px;
    background-color: aqua;
}
.left,.right,.middle{
    float: left;
    height: 100px;
}
.middle{
    width:100%;
    height: 100px;
    text-align: center;
}
.m{
    margin: 0 300px 0 200px;
    background-color: brown;
    text-align: center;
    height: 100px;
}
.left{
    background-color: blueviolet;
    width:200px;
    margin-left: -100%;
    text-align: center;
}
.right{
    background-color: chartreuse;
    width: 300px;
    text-align: center;
    margin-left: -300px;
}
.bottom{
    clear: both;
}

效果为：