css圣杯布局和双飞翼布局

圣杯布局

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

<body>
  <h1>实现圣杯布局</h1>
  <div id="header">Header</div>
  <div id="content">
    <!-- 这里注意要将middle即中间区域放在左边和右边前面,因为我们的需求是中间一栏最先加载、渲染出来,根据执行顺序所以把middle放在第一个。 -->
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
  </div>
  <div id="footer">footer</div>
</body>
<style>
  body {
     /* 设置最小宽度,防止挤压使中间内容消失 */ 
    min-width: 500px;
  }

  div {
    text-align: center;
  }

  #header {
    background-color: #f1f1f1;
  }

  #content {
    padding-left: 300px;
    padding-right: 200px;
  }

  #content #center {
    background-color: #ddd;
    width: 100%;
  }

  #content #left {
    position: relative;
    width: 300px;
    background-color: orange;
    margin-left: -100%;
    right: 300px;
  }

  #content #right {
    background-color: green;
    width: 200px;
    margin-right: -200px;
  }
/* 这里当我们给每中间内容的每一栏都加上float:left之后容易导致高度塌陷,解决办法 clear: both; overflow:hidden  */
  #content .column {
    float: left;
  }

  #footer {
    /* 清除浮动 */
    clear: both;
    background-color: #f1f1f1;
  }
</style>
</html>

<!--  问题:高度塌陷 是什么意思
怎么解决: 
overflow:hidden 【这里触发了BFC------BFC是一个独立的布局环境,可以理解为一个看不见的盒子,盒子内部的物品摆放不受外界环境影响。】 
clear:both -->
<!-- 圣杯布局:将中间的三个模块实现成为三栏布局,中间栏自适应,两侧内容宽度固定,三栏布局,中间一栏最先加载,渲染出来 
1.由于中间栏自使用,所以宽度设置为100%,
2.左右两栏使用 float:left 同时使用clear:both 解决高度塌陷的问题
3.将左右两栏的盒子移动上去 【这里通过相对定位我们可以看到是一行挤不下换成了两行,所以想左移动相应的位置就行了向左移动的位置是100%+盒子的宽度】
4.注意设置设置最小宽度,防止挤压使中间内容消失
圣杯布局就是将基本布局之后使用向左浮动,middle栏留出两边位置,然后使用相对定位将左右两栏通过margin-left定位到相应位置。
-->

双飞翼布局

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>双飞翼布局</title>
</head>

<body>
  <div class="container">
    <div class="wrapper">
      <div class="center">mid</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
<style>
  .container {
    height: 100px;
  }

  .left {
    float: left;
    margin-left: -100%;

    width: 100px;
    height: 100px;
    background: tomato;
  }

  .right {
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 100px;
    background: gold;
  }

  .wrapper {
    float: left;
    width: 100%;
    height: 100px;
    background: lightgreen;
  }

  .center {
    margin-left: 100px;
    margin-right: 200px;
    height: 100px;
  }
</style>

</html>

总结

相同点:

都实现了三栏布局,都使用了浮动

不同点:

圣杯布局 是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。

双飞翼布局 是通过float+margin没有使用相对定位

对于两列的处理:

圣杯布局 是给外部容器加padding,通过相对定位把两边定位出来。

双飞翼布局 是靠在中间这层外面套一层divpadding将内容挤出来中间。

相关推荐
开心工作室_kaic18 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā18 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js