CSS 布局

三栏布局就是两边宽度固定，中间自适应的布局，改变浏览器的宽度，两边的宽度不会变,只会中间区域的宽度变长变短

实现三栏布局的方法有

• 圣杯布局
• 双飞翼布局
• flex布局

圣杯布局

利用float + padding和 -margin的原理

1. 全部float + 清除浮动
2. 左右padding各100px
3. 左margin-left -100
4. 右margin-right -100
5. 中间width 100%

<header>header</header>
<div class="box clear-fix">
  <div class="block left">left</div>
  <div class="block center">center</div>
  <div class="block right">right</div>
</div>
<footer class="bottom">bottom</footer>

.box {
  padding: 0 100px;
}

/* 清除浮动 */
.clear-fix::after {
  content: "";
  display: block;
  clear: both;
}

.block {
  display: inline-block;
  height: 50px;
  font-size: 14px;
  float: left;
}

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

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

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

效果：

双飞翼布局

左、中、右三个盒子同级，在中间盒子里放一个小盒子，设置小盒子的margin，从而留出两侧盒子位置

<header>header</header>
<div class="box float">
  <div class="center">center</div>
</div>
<div class="float left">left</div>
<div class="float right">right</div>
<footer class="bottom">bottom</footer>

.box {
  width: 100%;
}

.float {
  float: left;
}

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

.center {
  margin: 0 100px;
  background-color: yellow;
}

.right {
  width: 100px;
  margin-left: -100px; //这里不是margin-right
  background-color: green;
}

header,
footer {
  height: 50px;
  background-color: aquamarine;
  clear: both
}

效果：

flex布局

flex简单

<header>header</header>
<div class="box">
  <div class="block left">left</div>
  <div class="block center">center</div>
  <div class="block right">right</div>
</div>
<footer class="bottom">bottom</footer>

.box {
  display: flex;
}

.block {
  height: 50px;
  font-size: 14px;
}

.left {
  background-color: red;
  flex: 0 0 100px;
}

.center {
  background-color: yellow;
  flex-grow: 1;
}


.right {
  background-color: green;
  flex: 0 0 100px
}

header,
footer {
  height: 50px;
  background-color: aquamarine;
}

效果：