CSS三栏布局——圣杯布局、双飞翼布局和flex布局

三栏布局就是两边宽度固定,中间自适应的布局.

改变浏览器的宽度,两边的宽度不会变,只会中间区域的宽度变长变短.

实现三栏布局的方法有圣杯布局、双飞翼布局和flex布局

圣杯布局

效果:

html代码:

<header>header</header>
<div class="main clear-fix">
    <div class="center">玩亚索</div>
    <div class="left">睡觉</div>
    <div class="right">吃饭</div>
</div>
<div class="bottom">bottom</div>

这里把center区域放在第一位是为了让浏览器先加载center区域.

css代码:

* {
    color: #fff;
}
header {
    background-color: blue;
}
.main {
    background-color: orange;
    padding: 0 100px; /* 左右两边的padding来放置left和right区域 */
}
.left,.center,.right {
    float: left;
}
.center {
    background-color: purple;
    width: 100%; /* 这会把left和right挤到下一行 */
}
.left {
    background-color: red;
    width: 100px;
    margin-left: -100%; /* 把left移动到和center同一行并且左边对齐 */
    position: relative;
    left: -100px; /* 再向左移动到main的padding区域,就不会挡住center了 */
}
.right {
    background-color: grey;
    width: 100px;
    margin-left: -100px; /* 把left移动到和center同一行并且右边对齐 */
    position: relative;
    left: 100px; /* 向右移动到右边的padding区域*/
}
footer {
    background-color: pink;
}
/* 清除浮动 */
.clear-fix::after {
    content: "";
    display: block;
    clear: both;
}

负边距margin-left: 只会在包围住你的父元素内部进行移动

position结合left: 是在元素原来位置的基础上移动,有可能移动到浏览器显示区域的外部.

双飞翼布局

效果:

html代码:

  <header>header</header>
  <div class="first">
    <div class="content">玩亚索</div>
  </div>
  <div class="second">睡觉</div>
  <div class="third">吃饭</div>
  <div class="footer">bottom</div> 

css代码:

.first,.second,.third {
    float: left;
}
/* 用这个div把主内容包起来之后,主内容就可使用margin空出两边的区域了 */
.first {
    width: 100%;
    background-color: purple;
}
.content {
    margin: 0 100px;
}
.second {
    width: 100px;
    background-color: red;
    margin-left: -100%; /* 作用和圣杯一样 */
}
.third {
    width: 100px;
    background-color: grey;
    margin-left: -100px; /* 作用和圣杯一样 */
}
.footer {
    background-color: pink;
    clear: both; /* 清除footer上面元素的浮动 */
}

flex(推荐)

flex布局学习请参考: https://www.ruanyifeng.com/bl...

效果:

html代码:

  <header>header</header>
  <div class="flex-box">
    <div class="flex-center">玩亚索</div>
    <div class="flex-left">睡觉</div>
    <div class="flex-right">吃饭</div>
  </div>
  <footer>footer</footer>

css代码:

* {
    color: #fff;
}
header {
    background-color: blue;
}
.flex-box {
    display: flex;
}
.flex-center {
    background-color: purple;
    flex-grow: 1;
}
.flex-left {
    background-color: red;
    order: -1;
    flex: 0 0 100px;
}
.flex-right {
    background-color: green;
    flex: 0 0 100px;
}
footer {
    background-color: pink;
}