css常见布局 | 易学教程

什么是布局

布局简单来说就是如何排列页面中各部分的内容

那么，如何排列呢？

页面中常见的布局

单列布局
- 等宽的单栏布局
- 中间内容略窄的单栏布局
两栏布局（一遍定宽、另一边自适应）
- 通过 float + overflow 来实现
- 通过 position 实现
- 通过 float + calc 来实现
- 通过 flex 来实现
三栏布局（左右两边定宽、中间内容自适应）
- 通过 float 来实现
- 通过 position 来实现
- 通过 table 来实现
- 通过 flex 来实现
- 圣杯布局
- 双飞翼布局

单列布局

1.等宽的单列布局

按照普通文档流的排列方式，从上而下依次排列只需将每个部分的宽度设置成一样即可
在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 800px;
      margin: 0 auto;
    }
    .header, .content, .footer {
      width: 800px;
      text-align: center;
    }
    .main .header {
      height: 64px;
      background-color: lightskyblue;
      line-height: 64px;
    }
    .main .content {
      height: 500px;
      background-color: orange;
      line-height: 500px;
    }
    .main .footer {
      height: 64px;
      background-color: grey;
      line-height: 64px;
    }
  </style>
</head>

<body>
   <div class="main">
    <div class="header">我是页头部分</div>
    <div class="content">我是中间内容部分</div>
    <div class="footer">我是页脚部分</div>
  </div>
</body>

</html>

2.中间内容略窄的单列布局

与等宽的单列布局思路差不多
在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .header {
      width: 100%;
      height: 64px;
      background: #f5f5f5;
    }
    .header .nav {
      width: 80%;
      height: 100%;
      background: lightskyblue;
      margin: 0 auto;
      text-align: center;
      line-height: 64px;
    }
    .content {
      width: 80%;
      height: 590px;
      background: orange;
      margin: 0 auto;
      text-align: center;
      line-height: 590px;
    }
    .footer {
      width: 100%;
      height: 64px;
      background: #f5f5f5;
    }
    .footer .footerCon {
      width: 80%;
      height: 100%;
      margin: 0 auto;
      background: #ccc;
      text-align: center;
      line-height: 64px;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="nav">我是导航栏</div>
  </div>
  <div class="content">
    我是中间的内容部分
  </div>
  <div class="footer">
    <div class="footerCon">
      我是页脚的部分
    </div>
  </div>
</body>

</html>

双栏布局

效果如下：
在这里插入图片描述
1.通过 float + overflow 来实现

原理：普通文档流中的块级元素在页面排列时，会忽视浮动流

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 80%;
      margin: 0 auto;
    }
    .left {
      float: left;
      width: 400px;
      height: 500px;
      background: greenyellow;
    }

    .right {
      height: 500px;
      background: skyblue;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="left">我是左边的固定宽度的部分</div>
    <div class="right">我是右边自适应的部分</div>
  </div>
</body>

</html>

2.通过position实现

原理：普通文档流中的块级元素在页面排列时，会忽视脱离文档流的元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      position: relative;
      width: 80%;
      margin: 0 auto;
    }

    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 300px;
      background: greenyellow;
    }

    .right {
      margin-left: 200px;
      height: 300px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="left">我是左边的固定宽度的部分</div>
    <div class="right">我是右边自适应的部分</div>
  </div>
</body>

</html>

3.通过 float + calc 来实现

calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值
举例如下：

width: calc(100% - 80px);

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      width: 80%;
      margin: 0 auto;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background: yellowgreen;
    }

    .right {
      float: left;
      width: calc(100% - 200px);
      height: 300px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="left">我是左边的固定宽度的部分</div>
    <div class="right">我是右边自适应的部分</div>
  </div>
</body>

</html>

4.通过flex来实现
原理：flex布局的相关知识
完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      display: flex;
      width: 80%;
      margin: 0 auto;
    }

    .left {
      width: 200px;
      height: 200px;
      background-color: greenyellow;
    }

    .right {
      flex: 1;
      height: 200px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="left">我是左边的固定宽度的部分</div>
    <div class="right">我是右边自适应的部分</div>
  </div>
</body>

</html>

三栏布局（两边定宽，中间自适应）

效果大致如下（除了颜色之外）
在这里插入图片描述
1.通过 float 来实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .left {
      width: 400px;
      height: 500px;
      background: #987;
      float: left;
    }

    .right {
      width: 300px;
      height: 500px;
      background: #369;
      float: right;
    }

    .middle {
      overflow: hidden;
      height: 500px;
      background: #192;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="left">我是左边</div>
    <div class="right">我是右边</div>
    <div class="middle">我是中间</div>
  </div>
</body>

</html>

2.通过 position 来实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      position: relative;
    }

    .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 500px;
      background-color: red;
    }

    .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 500px;
      background: greenyellow;
    }

    .middle {
      height: 500px;
      background: yellow;
      margin-left: 300px;
      margin-right: 200px;
    }
  </style>
</head>

<body>
  <div class="main">
  <div class="left">我是左边</div>
  <div class="middle">我是中间</div>
  <div class="right">我是右边</div>
</div>
</body>

</html>

3.通过 table 来实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      width: 100%;
      display: table;
    }

    .left {
      display: table-cell;
      width: 300px;
      height: 500px;
      background: salmon;
    }

    .middle {
      height: 500px;
      background: skyblue;
    }

    .right {
      display: table-cell;
      width: 400px;
      height: 500px;
      background: lawngreen;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="left">我是左边</div>
    <div class="middle">我是中间</div>
    <div class="right">我是右边</div>
  </div>
  </div>
</body>

</html>

4.通过flex来实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      display: flex;
    }

    .left {
      width: 300px;
      height: 500px;
      background: salmon;
    }

    .middle {
      flex: 1;
      height: 500px;
      background: skyblue;
    }

    .right {
      width: 400px;
      height: 500px;
      background: lawngreen;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="left">我是左边</div>
    <div class="middle">我是中间</div>
    <div class="right">我是右边</div>
  </div>
</body>

</html>

圣杯布局和双飞翼布局

圣杯布局

html结构

<div class="main">
  <div class="middle">
    内容部分
  </div>
  <div class="left">
    左边部分
  </div>
  <div class="right">
    右边部分
  </div>
</div>

css分析
1）基本样式

.main{
	background-color: #ccc;
}
.middle,.left,.right{
	height: 200px;
}
.middle{
    width: 100%;
    background-color: red;
}
.left{
    width: 100px;
    background-color: blue;
}
.right{
    width: 150px;
    background-color: green;
}

在这里插入图片描述
2.通过浮动使其脱离标准文档流

.middle,.left,.right{
	float: left;
}
.container{
    /*清除浮动带来的高度塌陷*/
    overflow:hidden;
}

在这里插入图片描述

按道理说应该变成一行，但为什么变成了两行
原因是一行放不下，因为内容部分（middle）的宽度是父容器的100%

3.使用margin-left将左右盒子拉至应该在的位置
左盒子的margin-left: -100%
右盒子的margin-left: -右盒子的宽度即可

.left{
    margin-left: -100%;
}
.right{
    margin-left: -150px;
}

在这里插入图片描述
左右栏已经拉到了指定位置，但是有一个问题，就是遮挡住了中间栏（middle）里面的内容

4.给父容器设置padding值来让中间盒子（middle）的宽度值变小

padding:0 右边盒子宽度 0 左边盒子宽度

padding: 0 150px 0 100px;

在这里插入图片描述

父容器没有设置宽度，所以内容区域（middle）width变小了，两边留出了足够的位置，但是浮动不能越过父容器的padding区域，所以我们还需要用相对位置来移动左右栏的位置。

.left,.right{
    position: relative;
}
.left{
    left: -100px;
}
.right{
    right: -150px;
}

在这里插入图片描述

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三栏布局：圣杯布局</title>
  <style>
    * {
      margin: 0;
    }

    .container {
      background-color: #ccc;
      overflow: hidden;
      padding: 0 150px 0 100px;
    }

    .main,
    .left,
    .right {
      height: 200px;
      float: left;
      position: relative;
    }

    .main {
      width: 100%;
      background-color: yellow;

    }

    .left {
      width: 100px;
      background-color: skyblue;
      margin-left: -100%;
      left: -100px;
    }

    .right {
      width: 150px;
      background-color: greenyellow;
      margin-left: -150px;
      right: -150px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">
      内容部分
    </div>
    <div class="left">
      左边部分
    </div>
    <div class="right">
      右边部分
    </div>
  </div>
</body>

</html>

问题；浏览器窗口变窄到一定程度之后就会有问题
在这里插入图片描述
原因：左右盒子设置了相对定位，当左右盒子的位置发生重叠时，一行放不下了，就会换行，造成这种结果

解决办法：

1.给父容器设置最小宽度，这个最小宽度的计算为：left盒子宽度*2 + right盒子宽度
2.使用双飞翼布局

双飞翼布局

主要是不同是给中间部分在套上一层容器，这样做以后，大的容器就不再需要设置padding值，左右栏盒子也不用再设置相对布局，代码精简了很多，而且不会出现上面变的特别窄布局会乱掉的问题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .main {
    overflow: hidden;
  }

  .middle,
  .left,
  .right {
    height: 200px;
    float: left;
  }

  .middle {
    background-color: yellow;
    width: 100%;
  }

  .left {
    width: 100px;
    background-color: skyblue;
    margin-left: -100%;
  }

  .right {
    width: 150px;
    background-color: green;
    margin-left: -150px;
  }

  .middle-content {
    background-color: red;
    margin: 0 150px 0 100px;
    height: 200px;
  }
</style>

<body>
  <div class="main">
    <div class="middle">
      <div class="middle-content">
        我是中间内容部分
      </div>
      <div style="width: 100px;height: 100px; background: #fff;;"></div>
    </div>
    <div class="left">
      我是左边内容部分
    </div>
    <div class="right">
      我是右边内容部分
    </div>
  </div>
</body>

</html>

来源：CSDN

作者：木子雨吧

链接：https://blog.csdn.net/qq_44162474/article/details/103496829

标签

margin

background

html代码