常见网页布局的介绍

左侧固定，右侧自适应

<div class="parent">
    <div class="left">左侧的盒子</div>
    <div class="right">右侧的盒子</div>
</div>

1. 使用flex实现
.parent {
  display: flex;
}

.left {
  width: 200px;
  border: 1px solid red;
  margin-right: 10px;
}

.right {
  flex: 1; // 相当于 flex： 1 1 0 填充满剩余空间
  border: 1px solid black;
}

_____________________________________________________________________________

2.使用传统的浮动实现
.parent {
  height: 500px;
  border: 1px solid red;
}

.left {
  float: left; // 左侧固定的盒子，宽高写死，并且浮动
  height: 460px;
  width: 200px;
  border: 1px solid green;
  margin: 20px;
}

.right {
  height: 460px; // 右侧不写宽度，直接用margin-left挤出距离
  border: 1px solid blue;
  margin: 20px 20px 20px 260px;
}

右侧固定，左侧自适应

<div class="parent">
    <div class="left">左侧的盒子</div>
    <div class="right">右侧的盒子</div>
</div>
  
1.使用flex实现
.parent {
  display: flex;
}

.left {
  flex: 1;  // flex: 1 1 auto;
  border: 1px solid red;
  margin-right: 10px;
}

.right {
  width: 200px;
  border: 1px solid blue;
}

_____________________________________________________________________________

2. 使用传统的浮动实现
<div class="parent">
    <div class="right">右侧的盒子</div>
    <div class="left">左侧的盒子</div>
</div>

.parent {
  border: 1px solid black;
}

.left { // div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度
  margin-right: 220px;
  border: 1px solid red;
}

.right {
  float: right; // html中right必须放在left盒子之前
  width: 200px;
  border: 1px solid blue;
}

圣杯布局（左右固定，中间自适应）

<div class="parent">
    <div class="left">左侧的盒子</div>
    <div class="center">中间的盒子</div>
    <div class="right">右侧的盒子</div>
</div>

1.flex布局
.parent {
  display: flex;
}

.left {
  border: 1px solid red;
  flex: 0 0 100px; // 这里左右盒子甚至的宽度是100px
}

.center {
  flex: 1;
  border: 1px solid blue;
}

.right {
  flex: 0 0 100px;
  border: 1px solid red;
}

_____________________________________________________________________________

2.使用浮动+margin实现
<div class="parent">
    <div class="left">左侧的盒子</div>
    <div class="right">右侧的盒子</div>  // 浮动的盒子要放到标准流盒子的右侧
    <div class="center">中间的盒子</div>
</div>

.left, .center, .right{
    height: 200px;
}

left {
  width: 200px;
  border: 1px solid red;
  float: left; // 左右盒子都写死宽高并浮动
}

.center {
  margin-left: 220px; // 使用左右margin值挤出自己的位置
  margin-right: 220px;
  border: 1px solid blue;
}

.right {
  width: 200px;
  float: right;
  border: 1px solid red;
}

_____________________________________________________________________________

3.使用margin 负边距+padding来实现
<div class="parent">
    <div class="center">中间的盒子</div>
    <div class="left">左侧的盒子</div>
    <div class="right">右侧的盒子</div>
</div>

.parent {
  padding-left: 100px;  // 给左右两个盒子留出位置
  padding-right: 100px;
}

.left,.center,.right {
  float: left;
  position: relative;
}

.left {
  margin-left: -100%; // 因为浮动关系，就把左边块上移到了[center]左侧，与其交织在一起，这样可以让left回到上一行最左侧
  left: -100px; // 回到父元素预留的左侧padding的位置
  width: 100px;
  border: 1px solid red;
}

.center {
  width: 100%;
  border: 1px solid blue;
}

.right {
  margin-left: -100px; // 右侧移动的是自己的宽度
  right: -100px; // 回到父元素预留的右侧的padding的位置
  width: 100px;
  border: 1px solid red;
}

中间固定 两侧自适应

<div class="parent">
    <div class="left">左侧的盒子</div>
    <div class="center">中间的盒子</div>
    <div class="right">右侧的盒子</div>
</div>

1. 使用flex实现
.parent {
  display: flex;
}

.left {
  flex: 1;
  border: 1px solid red;
}

.center {
  width: 200px;
  border: 1px solid black;
}

.right {
  flex: 1;
  border: 1px solid red;
}

_____________________________________________________________________________

2.通过绝对定位和预留padding值来实现
.parent {
  position: relative;
  box-sizing: border-box;
}

.left,.right {
  width: 50%;
  float: left;
  border: 1px solid red;
}

.left {
  padding-right: 100px; // 这是预留给中间盒子宽度的二分之一
}

.center { // 中间的盒子要水平居中到最中间，相当于是叠在左右两个盒子的上方
  width: 200px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid black;
}

.right {
  padding-left: 100px;
}

_____________________________________________________________________________

3.使用calc()函数计算实现
.parent {
  height: 200px;
}

.left,.right {
  float: left;
  height: 100%;
  width: calc(50% - 100px); // 左右两边通过calc计算实现，减去的是中间容器宽度的一般
  border: 1px solid red;
}

.center {
  width: 200px;
  float: left;
  height: 100%;
  border: 1px solid black;
}

等分布局

等分布局其实就是我们常用的百分比布局，宽度自适应，高度写死，但是这样布局不能百分比的去还原设计图，一些小的icon也需要写死，一些图片需要保持等比例缩放。

多列等高布局（依据padding占用空间）

<div class="parent">
    <div class="left">左侧的盒子</div>
    <div class="right">右侧的盒子</div>
</div>

1. 使用flex布局
// 由于flex的align-items的默认值是stretch，所以高度是等高的
// 假如想通过flex布局实现子项目的高度自适应，可以将align-items设置成flex-start
.parent {
  display: flex;
}

.left,.right {
  border: 1px solid red;
  margin-right: 10px;
  width: 100px;
}

_____________________________________________________________________________

2. 使用负边距抵消
.parent {
  width: 300px;
  border: 1px solid blue;
  overflow: hidden;
}
.left,.right {
  float: left;
  width: 100px;
  border: 1px solid red;
  padding-bottom: 2000px; // 其他比这列矮的列，会用它们的padding-bottom来补偿这部分高度差
  margin-bottom: -2000px; // 设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom
}

当我们在进行移动端开发的时候，这些页面布局是会经常使用的，希望这些小例子可以帮助大家理解~ 动动手 敲敲代码会更容易理解哦~😊