前端基础(十五)_多栏布局（两列自适应布局、圣杯布局---三列布局、双飞翼布局--三列布局、等高布局）

news2025/7/9 2:15:58

什么是自适应？

自适应：让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本页面的问题。
自适应布局：解决在不同大小的设备上呈现相同网页的问题

两列自适应布局

1、Html结构中–左右两个盒子；
2、左边固定宽度，右侧宽度100%；
3、为左侧盒子设置position:absolute;
4、为右侧盒子添加子盒，设置padding-left,属性值为左侧盒子的宽度。
页面：

在这里插入图片描述
代码：

<!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>LiuQing</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .left {
      position: absolute;
      left: 0;
      width: 300px;
      background-color: red;
      color: #fff;
      height: 100%;
    }

    .right {
      background-color: pink;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="left">left</div>
  <div class="right">right</div>
</body>

</html>

但是发现一个问题就是right盒子的文本看不到了，因为left盒子脱离了文档流，层级比right高。
我们虽然还没学习flex，但是我们可以提前开一下怎么写的：

<!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>LiuQing</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      display: flex;
    }

    .left {
      width: 300px;
      background-color: red;
      color: #fff;
      height: 100%;
    }

    .right {
      flex: 1;
      background-color: pink;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="left">left</div>
  <div class="right">right</div>
</body>

</html>

页面效果：
在这里插入图片描述

圣杯布局—三列布局

1、Html结构中–先主体内容后侧边栏
2、两侧固定宽度中间内容宽度设置width:100%;
3、主题内容和左右侧边栏之间分别加float:left
4、左侧设置margin-left：-100%；
5、右侧设置margin-left:-自身宽度；
6、将中间内容露出来在外面的大盒子上padding: 0 右侧边的宽度 0 左侧边的宽度；
7、分别为左侧边和右侧边设置position:relative;左侧设置left”-左侧边的宽度；还原左侧边。右侧边设置right:-右侧边的宽度；还原右侧边

主要利用浮动，padding属性实现，上面的方法虽然能实现，但是太过复杂，这里不再实现，哈哈哈哈哈哈…
下面看flex实现：
在这里插入图片描述

<!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>LiuQing</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      display: flex;
    }

    .left {
      width: 300px;
      background-color: red;
      color: #fff;
      height: 100%;
    }

    .center {
      flex: 1;
      background-color: pink;
      color: #fff;
      height: 100%;
    }

    .right {
      width: 300px;
      height: 100%;
      background-color: blue;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</body>

</html>

双飞翼布局–三列布局

1、Html结构中–先主体内容后侧边；
2、两侧固定宽度中间内容宽度设置width:100%;
3、主题内容和左右侧边栏之间分别加float:left；
4、左侧设置margin-left：-100%；将左侧拉到最左边
5、右侧设置margin-left:-自身宽度；吧右侧边拉到最右边
6、在主体内容的子盒上设置margin:0 右侧边的宽度 0 左侧宽度；将中间内容露出来

和圣杯布局八九不离十，还是推荐flex。

等高布局

1.内外间距相抵消，为父元素设置overflow:hidden；
实现每一列需要
背景颜色由padding撑开
padding-bottom：1000px; 每一列使用padding撑开
margin-bottom:-1000px; 每一列由margin抵消
给父级盒子家overflow:hidden；
优点：结构简单，兼容所有浏览器
缺点：伪等高，需要合理控制margin和padding值

2.利用内容撑开父级元素的特点，为每一列添加对应的容器，进行相互嵌套，并在每天一个容器中添加背景颜色
三个嵌套的div负责背景，三列放在最内侧的div盒子中；
通过相对定位分配三列的背景的位置；
通过margin负值，将内容移到对应背景的位置；
父元素溢出隐藏；
优缺点：扩展性好，可以实现自适应，结构嵌套复杂

<div class="box"> overflow:hidden超出隐藏
      <div class="wrap1">  
          <div class="wrap2"> 置背景 position:ralative left:200px 使背景显示出来
             <div class="wrap3"> 设置背景 设置背景 position:ralative left:500px 使背景显示出来
                  <div class="left">左边</div> 设置宽度 左浮动  200px   margin-left=-700px
                  <div class="conter">中间</div>设置宽度 左浮动 500px   margin-left=-500px
                  <div class="right">右边</div>设置宽度 左浮动  300px 
              </div>
          </div>
      </div>
 </div>