圣杯布局和双飞翼布局详解

最新推荐文章于 2024-04-16 19:34:40 发布

野望.far

最新推荐文章于 2024-04-16 19:34:40 发布

阅读量198

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_46747024/article/details/125804384

版权

圣杯布局

结构：

上

内容（左中右）

下

浮动：

内容里面的左中右浮动

清除浮动：

下板块使用clear清除浮动

左右留位置：

内容加左右外边距，分别为左右板块的宽度

.content{
            margin-left: 200px;
            margin-right: 100px;
        }使用外边距负值：

content里面依次包含center，left，right。设置左浮动效果，同时content左右两边空出200px，100px，center宽为100%，则left，right默认挤到content里面的下一行，（同时也有左右两边的间隔），因为浮动，center，left，right按顺序依次越过覆盖前一个（left可以越过覆盖center,right可以越过覆盖left以及center）。left要设置到左边第一行（间隔200px位置），需设置左外边距负值，向左移动calc（-100%-200px）,设置-100%的值只能让left与center最左边覆盖，而不能越过。right需设置向右外边距负值，向右移动，-100px即可。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>圣杯</title>

<style>

*{

margin: 0;

padding: 0;

text-align: center;

}

.head{

width: 100%;

background-color: aqua;

}

.center{

width: 100%;

background-color: green;

}

.left{

background-color: coral;

width: 200px;

/* */

margin-left: calc(-100% - 200px);

/* margin-left: -200px; */

/* position: relative;

right: 100%; */

}

.right{

background-color: purple;

width: 100px;

margin-right: -100px;

}

.content{

margin-left: 200px;

margin-right: 100px;

}

.content div{

float: left;

}

.footer{

width: 100%;

background-color: aqua;

}

.content::after,.content::before{

display: block;

content: "";

clear: both;

}

</style>

</head>

<body>

<div class="head">头部</div>

<div class="content">

<div class="center">中间</div>

<div class="left">左</div>

<div class="right">右</div>

</div>

<div class="footer">底部</div>

</body>

</html>

双飞翼布局

结构与圣杯布局不同

结构：

上边

中间容器宽100%（中间部分）

左边

右边

下部

浮动：

中间容器，左边，右边三者浮动

清除浮动：

下边板块清除浮动

左右留位置：

中间div在左右留下外边距

.center{
            background-color: forestgreen;
            margin-left: 200px;
            margin-right: 100px;
        }

左边板块左外边距负值，使元素到上面一行的宽度内

.left{
            background-color: orange;
            width: 200px;
            margin-left: -100%;
        }

右边板块也使用左外边距负值

.right{
            background-color: yellow;
            width: 100px;
            margin-left: -100px;
        }

双飞翼布局原理

有三个div，main，left，right，依次排序，并左浮动，main宽100%，left有200px，right有100px。因为浮动，且main宽为100%，left和right默认挤到第二行，在main中插入div-center，

center，设置左右各间隔200px，100px。left向左设置外边距负值-100%，left与main最左边200px重和覆盖，right向设置外边距负值-100px。righ与main最右边边100px重合覆盖。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>双飞翼</title>

<style>

*{

margin: 0;

padding: 0;

text-align: center;

}

.head{

width: 100%;

background-color: aqua;

}

.fly{

float: left;

}

.main{

width: 100%;

background-color: rgb(127, 255, 255);

}

.center{

background-color:green;

margin-left: 200px;

margin-right: 100px;

}

.left{

background-color:rgb(255, 115, 0);

width: 200px;

margin-left: -100%;

}

.right{

background-color: yellow;

width: 100px;

margin-left: -100px;

}

.footer{

width: 100%;

background-color: aqua;

}

</style>

</head>

<body>

<div class="head">头部</div>

<div class="fly main">

<div class="center">中间</div>

</div>

<div class="fly left">左边</div>

<div class="fly right">右边</div>

<div class="footer">底部</div>

</body>

</html>