实现圣杯布局与双飞翼布局原始实现-flex实现-grid实现

nuise_

已于 2022-09-09 22:30:58 修改

阅读量860

点赞数

分类专栏： css+html 面试题文章标签： css css3 html

于 2022-06-04 21:52:29 首次发布

本文链接：https://blog.csdn.net/qq_41370833/article/details/125125607

版权

面试题同时被 2 个专栏收录

40 篇文章 11 订阅

订阅专栏

css+html

8 篇文章 0 订阅

订阅专栏

文章目录

实现圣杯布局和双飞翼布局

实现圣杯布局和双飞翼布局

本质:三列布局，左右两边固定，中间自适应且优先加载
圣杯布局，双飞翼布局
优先加载:主区域标签写在最前面

<header>头部</header>
<div class="box">
	<div class="center">主区域</div>
    <div class="left">左区域</div>
    <div class="right">右区域</div>
</div>
<footer>底部</footer>

float + margin负值+relative/添加盒子

前期准备

1.三个区域的盒子向左浮动:三栏在一行显示在这里插入图片描述

.box div{
    float:left;
}

问题:出现高度塌陷
原因:父元素的高度默认被子元素撑开。当子元素浮动后，完全脱离文档流，子元素将无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，其下的元素会自动上移，影响布局。
在这里插入图片描述
解决办法:清除浮动
清除浮动是指该元素恢复浮动元素没有浮动之前的位置
给受影响的盒子添加clear属性，clear元素的原理是设置清除浮动以后，浏览器会自动为元素添加上外边距，所以添加了clear的属性不可以手动添加margin-top。

2.清除浮动 不影响后面区域
原理:在父元素的后面添加一个空标签(行内元素)，清除浮动对其的影响并使其为块元素，浏览器自动改变margin-top使其可以撑开父元素。
需要一个子元素占位，清除浮动的影响，回到应该从撑起来的状态。

.box::after{
	content:"";
	display:block;
	clear:both;
}

在这里插入图片描述
3.中间元素自适应
中间元素自适应:width:100%

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

float 使他们处在了同一行，只是center把一行都占据了，把其他两个都挤下去了。

在这里插入图片描述

圣杯布局 margin负值+relative

box设置一个padding：0 100px,将左右两边各腾出100px宽度。
①这里就是圣杯布局和双飞翼布局不一样的地方！通过padding设置中间区域的实际大小是不包含左右区域的。
②给左右区域固定栏腾出位置，我们这里假设左右区域固定的大小是100px。
margin负值移动，将三列布局显示在一行
left、right都是被挤下去的，那么将left向左移动一行的距离，left就可以显示在这一行的最开始了，right只需要向左移动100px就可以在一行显示了。

.left{
    background-color: red;
    width: 100px;
    margin-left: -100%;/*100%相对于父元素来说*/
}
.right{
    background-color: blue;
    width: 100px;
    margin-left: -100px;
}

将左右区域定位到固定位置
relative是参照于元素A原来的位置(开启相对定位的元素A)在文档流中的位置进行定位的

.left{
    background-color: red;
    width: 100px;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.right{
    background-color: blue;
    width: 100px;
    margin-left: -100px;
    position: relative;
    left: 100px;
}

在这里插入图片描述

双飞翼布局 margin负值+添加盒子

margin负值移动，将三列布局显示在一行 --这一步相同的

.left{
    background-color: red;
    width: 100px;
    margin-left: -100%;/*100%相对于父元素来说*/
}
.right{
    background-color: blue;
    width: 100px;
    margin-left: -100px;
}

在这里插入图片描述
中间区域的内容不见了,在中间区域里面添加的一个盒子，并给盒子设置margin：0 200px
所以说双飞翼布局，中间区域center占的还是一行的空间，只是inner占据到了中间位置

<div class="header">header</div>
    <div class="box">
        <div class="center">
            <div class="inner">主区域</div>
            
        </div>
        <div class="left">左区域</div>
        <div class="right">右区域</div>
    </div>
    <div class="footer">footer</div>
//css
.inner{
    margin: 0 100px;
}

flex实现圣杯布局

先准备好布局

<style>
/* 设置颜色为了方便看见效果 */
.header,.footer{
    background-color: blanchedalmond;
    width: 100%;
}
.center{
    background-color: pink;
}

.left{
    background-color: red;
    width: 100px;
}
.right{
    background-color: blue;
    width: 100px;
}


</style>
<body>

    <div class="header">header</div>
    <div class="box">
        <div class="center">主区域 </div>
        <div class="left">左区域</div>
        <div class="right">右区域</div>
    </div>
    <div class="footer">footer</div>

</body>

在这里插入图片描述
2. 中间区域flex:1实现自适应

.box{
    display: flex;
}
.center{
    background-color: pink;
    flex:1;/*自适应*/
}

移动位置使得center到中间

.center{
    background-color: pink;
    flex:1;/*自适应*/
    order:2;/*移动到中间*/
}

.left{
    background-color: red;
    width: 100px;
    order:1;
}
.right{
    background-color: blue;
    width: 100px;
    order:3;
}

在这里插入图片描述

grid实现圣杯布局

<style>
.header,.footer{
    background-color: blanchedalmond;
    width: 100%;
}
.box{
  display: grid;
  grid-template-columns:100px 1fr 100px;
  grid-template-areas: "a b c";
}
.center{
    background-color: pink;
    grid-area:b ;
}

.left{
    background-color: red;
    width: 100px;
    grid-area:a
}
.right{
    background-color: blue;
    width: 100px;
}
</style>

<body>
  <header>头部</header>
  <div class="box">
    <div class="center">主区域</div>
      <div class="left">左区域</div>
      <div class="right">右区域</div>
  </div>
  <footer>底部</footer>
</body>

在这里插入图片描述

nuise_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现圣杯布局与双飞翼布局原始实现-flex实现-grid实现

本质:三列布局，左右两边固定，中间自适应且优先加载优先加载:主区域标签写在最前面float + margin负值+relative/添加盒子前期准备1.三个区域的盒子向左浮动:三栏在一行显示问题:出现高度塌陷原因:父元素的高度默认被子元素撑开。当子元素浮动后，完全脱离文档流，子元素将无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，其下的元素会自动上移，影响布局。解决办法:清除浮动清除浮动是指该元素恢复浮动元素没有浮动之前的位置给受影响的盒子添加clear属性，clear元
复制链接

扫一扫