初识圣杯布局、双飞翼布局

最新推荐文章于 2022-07-02 15:57:43 发布

whisper49

最新推荐文章于 2022-07-02 15:57:43 发布

阅读量153

点赞数

文章标签： css 定位

本文链接：https://blog.csdn.net/whisper49/article/details/116781101

版权

一、圣杯布局

1.圣杯布局

2.圣杯布局结构特点

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

3.圣杯布局的实现——浮动

（1）html基本结构

<!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>Document</title>
    <link rel="stylesheet" href="css/shengbei.css" />
</head>

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

（2）样式设置

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 1190px;
}

.header,
.footer {
    /* 宽度和父级元素body一样 */
    width: 100%;
    background-color: cornflowerblue;
    text-align: center;
}

.footer {
    /* 清除浮动 */
    clear: both;
}

.container {
    /* 没有设置宽度，继承父元素的宽度，为left、right腾出空间 */
    padding-left: 150px;
    padding-right: 150px;
    height: 500px;
    *zoom: 1;
    /* IE6 7专有 */
}

.left,
.right,
.center {
    /* 因为浮动，center占据整个container */
    float: left;
    text-align: center;
    line-height: 250px;
}

.center {
    width: 100%;
    height: 500px;
    background-color: salmon;
}

.left {
    width: 150px;
    height: 500px;
    background-color: rgb(92, 211, 155);
    /* 让left回到上一行最左侧 */
    margin-left: -100%;
    /* 相对定位 */
    position: relative;
    left: -150px;
}

.right {
    width: 150px;
    height: 500px;
    margin-right: -150px; 
    /* margin-right: -100%;
   position: relative;
   right: 150px; */
    background-color: palegreen;
}

body：设置最小宽度，防止浏览器缩放时出现元素布局混乱的情况
body { min-width: 1190px; }
container大盒子：设置padding，是为了给后面的盒子left、right腾出空间；padding左右的值要跟左右盒子的宽度相同
{padding-left: 150px; padding-right: 150px;}
center：让其宽度与父元素container相同
{width: 100%;}
中间三栏left、center、right设置浮动，让三个div盒子实现并排；由于center铺满了整个父盒子内容区，left、right会被挤下来
{float: left; }
left：
{margin-left: -100%; position: relative; left: -150px;}

margin负值问题：
margin为正值，相当于盒子往外面扩展；margin为负值，相当于往内收缩
margin、padding的取值为百分比时，都是以父级元素的宽度为参照来计算的

其实个人还没有很懂margin原理，可参考margin负值原理

在设置{margin-left: -100%;}之后，left这个盒子的左边界是与center这个盒子左边界对齐的，此时由于父级盒子container的设置了padding-left：150px，所以left正好距离浏览器边界150px，此时再用相对定位，将其拉过去；

设置相对定位left: -150px，设置负值的原因是left这个盒子的左边界是与center这个盒子左边界对齐的（将left背景色设置为transparent可以看看效果）

也就是position定位是相对于父元素的文本区
在这里插入图片描述

定位的left是0，而left的含义是距离左边多少px（相当于右走），既然要往左走，则设置为负值

设置好之后效果如下

right：最后设置margin-right: -150px;，让right盒子居于右侧

浮动元素与margin取值的关系

当元素的浮动方向与margin方向相同时，该元素可以覆盖或远离上一个浮动元素。
当相反时，该元素不能覆盖上一个浮动元素，最近只能紧贴上一个元素右边

二、双飞翼布局

用圣杯布局的原理：

1.html结构

<!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>Document</title>
    <link rel="stylesheet" href="css/shuangfeiyi.css" />
</head>

<body>
    <div class="container">
        <div class="center">爱</div>
        <div class="left">我</div>
        <div class="right">易烊千玺</div>
    </div>
</body>

</html>

2.样式设置

* {
    margin: 0;
    padding: 0;
}

html,
body {
    min-width: 1190px;
}

.container {
    padding-right: 200px;
    padding-left: 200px;
}

.container>div {
    float: left;
}

.center {
    width: 100%;
    background-color: lightpink;
}

.left {
    width: 200px;
    background-color: rgb(154, 154, 206);
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 200px;
    background-color: rgb(145, 182, 204);
    margin-right: -200px;
}

在这里插入图片描述
双飞翼：

* {
    margin: 0;
    padding: 0;
}

html,
body {
    min-width: 1190px;
}

.content {
    margin-right: 100px;
    margin-left: 100px;
}

.container>div {
    float: left;
    height: 500px;
}

.center {
    width: 100%;
    background-color: lightpink;
}

.left {
    width: 100px;
    background-color: rgb(154, 154, 206);
    margin-left: -100%;
}

.right {
    width: 100px;
    background-color: rgb(145, 182, 204);
    margin-right: -100px;
}

这里使用margin：在这里插入图片描述
left盒子的左边和center盒子的左边已经对齐了，设置{margin-left: -100%; }后，就直接在上一行对齐左边了，就不用再设置定位

.container {
    margin-right: 150px;
    margin-left: 150px;
}

三、圣杯布局与双飞翼布局

1.相同点：

（1）作用场景：设计两边顶宽，中间自适应的三栏布局，中间栏要放在文档流前面优先渲染。
（2）三栏全部都是float浮动，让三个div盒子并排，再设置左右padding或margin值，解决左右盒子覆盖中间盒子问题，形成三栏布局。

2.不同点

圣杯布局通过设置padding值来给左右盒子腾出空间，在这之后，就要用定位；而双飞翼布局通过设置margin给左右盒子腾出空间，仅用了浮动
解决‘中间栏div盒子不被遮挡’问题的方法不同：

圣杯布局是给中间的div盒子设置了padding-left和padding-right后，将左右两个div用相对布局；接着再使用相对定位

双飞翼布局是在中间div盒子center里创建子div盒子content用于放置内容，在该div盒子里用margin-left和margin-right为左右两栏div腾出空间，这样就不用再用定位了。

whisper49

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识圣杯布局、双飞翼布局

一、圣杯布局1.圣杯布局2.圣杯布局结构特点header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。3.圣杯布局的实现——浮动（1）html基本结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <me
复制链接

扫一扫