欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间：2024/1/18 编程问答 54 豆豆
生活随笔 收集整理的这篇文章主要介绍了 实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

文章目录

  • 实现圣杯布局和双飞翼布局
    • float + margin负值+relative/添加盒子
      • 前期准备
        • 圣杯布局 margin负值+relative
        • 双飞翼布局 margin负值+添加盒子
    • flex实现圣杯布局
      • grid实现圣杯布局

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

本质:三列布局，左右两边固定，中间自适应且优先加载

优先加载:主区域标签写在最前面

<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>

    总结

    以上是生活随笔为你收集整理的实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。