004-CSS-左右经典布局

最新推荐文章于 2024-09-12 15:53:16 发布

原创最新推荐文章于 2024-09-12 15:53:16 发布 · 671 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

001.有趣的CSS 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了五种网页布局技巧：弹性盒子布局、绝对定位配合padding/margin、行内块布局使用calc、浮动与BFC。每种方法都有适用场景和Tips，帮助开发者理解和选择合适的布局方式。

左右经典布局

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

方案一：弹性盒子布局

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

.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，左侧子盒子绝对定位

.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

.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)

.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

.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;
}