圣杯布局与双飞翼

圣杯布局是常见的 css 布局.其利用左中右三种

圣杯布局

先写出基础格式

<header><h4>Header内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>

然后写 css 样式

.header {
  width: 100%;
  height: 100px;
  background-color: darkseagreen;
}
.footer {
  width: 100%;
  height: 30px;
  background-color: darkslategray;
}
.container {
  height: 200px;
  padding: 0 100px 0 50px;
  overflow: hidden;
  background-color: rgb(242, 245, 241);
}
.left,
.middle,
.right {
  position: relative;
  float: left;
  height: 100px;
}
.middle {
  width: 100%;
  background-color: rgb(161, 25, 43);
}
.left {
  width: 50px;
  background-color: rgb(68, 156, 28);
}
.right {
  width: 100px;
  background-color: rgb(25, 39, 161);
}

利用负边距布局

.left {
  width: 50px;
  left: -50px;
  background-color: rgb(68, 156, 28);
}
.right {
  width: 100px;
  margin-left: -100px;
  right: -100px;
  background-color: rgb(25, 39, 161);
}

我们实现了固定比的布局,但是会出现中间盒子呗左右盒子给压住一部分

让中间自适应的盒子安全显示

.container{ padding: 0 200px;}
.left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;}

这里的200px是左右盒子的宽度。

双飞翼布局

html 样式

    <div class="header"></div>
    <div class="container">
      <div class="middle">
        <div id="main-content">
          <h4>中间弹性区</h4>
        </div>
      </div>
      <div class="left">
        <h4>左边栏</h4>
      </div>
      <div class="right">
        <h4>右边栏</h4>
      </div>
    </div>
    <div class="footer"></div>
  </div>

css 样式

.middle {
  width: 100%;
  background-color: rgb(224, 41, 185);
}
.main-content {
  margin: 0 100px 0 50px;
}
.left,
.middle,
.right {
  float: left;
  height: 100px;
}
.left {
  width: 50px;
  margin-left: -100%;
  background-color: rgb(68, 156, 28);
}
.right {
  width: 100px;
  margin-left: -100px;
  background-color: rgb(25, 39, 161);
}

二者区别

双飞翼是淘宝 UED 发明的. 区别在于使用的是 margin 还是 padding. 1.双飞翼布局不用设置相对布局,以及对应的 left 和 right 值 2. 双飞翼布局给主面板添加了一个父标签用来通过 margin 给子面板腾出空间