004-CSS-左右经典布局

左右经典布局

方案一：弹性盒子布局
[方案二：绝对定位 + padding](#方案二：绝对定位 + padding)
[方案三：绝对定位 + margin](#方案三：绝对定位 + margin)
[方案四：行内块布局 + calc](#方案四：行内块布局 + calc)
[方案五：浮动 + BFC](#方案五：浮动 + BFC)

方案一：弹性盒子布局

💡 Tips：左侧子盒子宽度固定，右侧子盒子 flex: 1

javascript 复制代码

.parent {
  display: flex;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.left-son {
  width: 100px;
  height: 100%;
  background: #4a90e2;
}
.right-son {
  flex: 1;
  height: 100%;
  background: #dfffdf;
}

方案二：绝对定位 + padding

💡 Tips：父盒子相对定位，padding-left，左侧子盒子绝对定位

javascript 复制代码

.parent {
  position: relative;
  padding-left: 100px;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.left-son {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100%;
  background: #4a90e2;
}
.right-son {
  height: 100%;
  background: #dfffdf;
}

方案三：绝对定位 + margin

💡 Tips：父盒子相对定位，左侧子盒子绝对定位，右侧子盒子margin-left

javascript 复制代码

.parent {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.left-son {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100%;
  background: #4a90e2;
}
.right-son {
  margin-left: 100px;
  height: 100%;
  background: #dfffdf;
}

方案四：行内块布局 + calc

💡 Tips：父盒子font-size: 0，子盒子行内块，左侧子盒子100px，右侧子盒子 calc(100% - 100px)

javascript 复制代码

.parent {
  font-size: 0; /* 解决DOM换行引起的空白像素问题 */
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.left-son {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100%;
  background: #4a90e2;
}
.right-son {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 100px);
  height: 100%;
  background: #dfffdf;
}

方案五：浮动 + BFC

💡 Tips：左侧子盒子浮动，右侧盒子 overflow:hidden; 触发 BFC

javascript 复制代码

.parent {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.left-son {
  float: left;
  width: 100px;
  height: 100%;
  background: #4a90e2;
}
.right-son {
  overflow: hidden;
  height: 100%;
  background: #dfffdf;
}